Pagecloud website builder

Sign up

Pagecloud website builder

How to add Open Graph tags to your website

Robin Gandy, December 13, 2022

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 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: 

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

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:

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:

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

Written by

Robin Gandy

Create your no-code landing page, website, or online store in no time.

Publish your homepage for free, no credit card required.

Create websites and popups for free with Pagecloud website builder