How to add Open Graph tags to your website

In the age of searching, sharing, and embedding, Open Graph tags are crucial for the best representation of your website through social media sites. Content marketing is likely a huge part of your online marketing strategy, so it’s important that your URLs, such as blog posts and landing page URLs, are eye-catching when shared through social media platforms. 

Although Open Graph tags do not impact your web page’s SEO, they improve the display and overall usability of your website. So if you’re not already using OG tags and images, it’s important to get started! Let’s go over the basics.

What are Open Graph tags? 

Open Graph meta tags (or OG tags) and images were invented by Facebook in 2012 in order to properly display a preview of a URL on the platform. Prior to Open Graph tags, a user had no control as to how their URL would look when posted to Facebook. 

Adding snippets of code (tags) to your web page can ensure that your page will display an image, title, description, etc. when shared on social media. Facebook has their own criteria for Open Graph, while other platforms (ex: Twitter) have a different tags to display your URL in their feed.

Why are Open Graphs tags important? 

Essentially, Open Graph tags make your site more “shareable”. If you’re looking to drive traffic to your website, you are likely going to be sharing your website on social media platforms. Open Graph tags and images generate a more engaging URL that generally displays an image, title, and description that lets the user know what the page is about before they click on the link. 

Above you can see a simple display of pagecloud.com in a Facebook feed. There is an OG image, title, and URL. 

Without Open Graph tags, you have no control over what your web page URLs will look like in a social media feed. What’s more, users who see your URL will be less likely to click on it without knowing what they are clicking on.

Important Open Graph tags

There are four Open Graph tags that should be considered essential for every web page, and several others that are less essential but can still have impact on your site usability and share-ability. The four most important Open Graph tags are: 

• og:title: This is usually the same as your SEO title tag, unless you want it to display differently in social media
• og:type: What "type" of web page is it? Og:type can be video, article, website, etc. 
• og:image: This tag should link to the image you want to display 
• og:url: The URL of the page 

These four tags should be used on each of your pages, although there are a number of other Open Graph tags you can include:

• og:description: A short description of your page or blog post. 
• og:site_name: The name of your website or app. 
• og:locale: The language and region your page or blog post is written in. 
• og:updated_time: The most recent time the page or blog post was updated. 
• og:audio: An audio URL that represents your page or blog post. 
• og:video: A video URL that represents your page or blog post.

Important Open Graph tags for Twitter

Twitter has its own set of Open Graph tags it has adopted, including what is referred to as a Twitter Card. Different types of Twitter Cards optimize your content to display properly in the Twitter feed. If your site is shared on Twitter, here are the some of the tags you can add to your site HTML:

• twitter:card: Multimedia format that distinguishes between video, image, etc. (fallback to og:type) 
• twitter:title: Page title (fallback to og:title)
• twitter:description: Description of the web page, (fallback to og:description)
• twitter:image: Display image (fallback to og:image).
• twitter:url: Displays the website URL (fallback to og:url).

The above types fallback to your Open Graph tags if the tags are not present on your site. The following tags are specific to twitter:

• twitter:card: Multimedia format that distinguishes between video, image, etc. (fallback to og:type) 
• twitter:title: Page title (fallback to og:title)
• twitter:description: Description of the web page, (fallback to og:description)
• twitter:image: Display image (fallback to og:image).
• twitter:url: Displays the website URL (fallback to og:url).

These tags implement twitter handles which can get more engagement for your post.

How do you use Open Graph? 

To use Open Graph tags, simply add the desired tags to the HTML (or the <head>) of the page you want to share, including the “og:” prefix. For example, to include a page title, you would add the following: 

<meta property="og:title" content="My Page Title">

An example for twitter would be: 

<meta property="twitter:site" content="@MyTwitterHandle">

Here's a real Pagecloud example for a Twitter:title tag:

Most site builders, like Pagecloud, have an SEO section on your page where you can enter the Open Graph content without having to add the tag to the page <head>. 

Next Steps

Check out our blog for more on optimizing your website for usability and search.