Have you ever shared a website link on any social media platform like X (formerly Twitter), Facebook, LinkedIn, or Discord, and noticed rich object previews of that site link in the post?
That's thanks to the Open Graph meta tags. Social media sites and web apps like Slack make use of Open Graph metadata tags to enhance the appearance of website links.
This allows better link previews with more information (such as description and image) so users can gather more info immediately, possibly increasing click-through rates and user engagement.
In this article, I'll guide you through everything you need to know about Open Graph tags and how you can easily implement them in your own websites or apps.
Let's get started.
What are Open Graph Meta Tags?
The Open Graph is a protocol, an internet protocol, that was initially designed by Facebook (Meta) to incorporate metadata within a web page such as its image, title, meta description, and more, to better represent that page content when shared on the social media websites.
While the rich snippet appearance is quite common in social sites, apps like Discord, Slack, and Steam also make the URL appear as rich objects.
So, for example, rather than a plain text like https://w3things.com/blog/moving-w3things-from-wordpress-to-11ty/, you might notice a Twitter card as shown below.
Similarly, when you share your website on Facebook and LinkedIn, they use Open Graph tags to ensure the rich appearance of the URLs.
Below are a few more examples of how the blog post "Moving W3Things from WordPress to 11ty (Eleventy)" may appear when shared on social platforms and web apps.
Please keep in mind that the exact appearance of these link previews on social sites and apps may change over time if they make updates. The above link previews were taken when writing this article.
Open Graph Tags at a Glance
A typical example of HTML Open Graph metadata tags looks like the following in the web page code or markup.
<meta name="title" property="og:title" content="Moving W3Things from WordPress to 11ty (Eleventy)">
<meta name="description" property="og:description" content="Migrating W3Things from WordPress to 11ty (Eleventy) static site generator. Sharing the site transfer experience and more.">
<meta name="author" content="Danial Zahid">
<meta name="image" property="og:image" content="https://w3things.com/blog/moving-w3things-from-wordpress-to-11ty/media/moving-w3things-from-wordpress-to-11ty.png">
<meta property="og:image:secure_url" content="https://w3things.com/blog/moving-w3things-from-wordpress-to-11ty/media/moving-w3things-from-wordpress-to-11ty.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="Moving W3Things from WordPress to 11ty (Eleventy)">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="W3Things">
<meta property="og:type" content="article">
<meta property="og:url" content="https://w3things.com/blog/moving-w3things-from-wordpress-to-11ty/">
<meta property="og:updated_time" content="2023-12-11T00:00:00Z">
<meta property="article:publisher" content="https://www.facebook.com/w3things/">
<meta property="article:author" content="https://www.facebook.com/iamdanialzahid">
<meta property="article:published_time" content="2023-12-10T18:00:00Z">
<meta property="article:modified_time" content="2023-12-11T00:00:00Z">
<meta property="article:section" content="Site News">
<meta property="article:tag" content="Eleventy">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Website Optimization">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@w3things">
<meta name="twitter:creator" content="@iamdanialzahid">
<meta name="twitter:title" content="Moving W3Things from WordPress to 11ty (Eleventy)">
<meta name="twitter:description" content="Migrating W3Things from WordPress to 11ty (Eleventy) static site generator. Sharing the site transfer experience and more.">
<meta name="twitter:image" content="https://w3things.com/blog/moving-w3things-from-wordpress-to-11ty/media/moving-w3things-from-wordpress-to-11ty.png">
<meta name="twitter:image:alt" content="Moving W3Things from WordPress to 11ty (Eleventy)">
Important Notes Regarding the Open Graph Implementation
Before we move on, I'd like to point out a few important notes that I believe you should be aware of when implementing the Open Graph tags in your site or app.
Check the Relevant Social Media Platform for Additional Open Graph Tags
Apart from the basic OG tags, each social site and web platform may have their own Open Graph implementation requirements and guide as well as additional OG tags that offer better enhancements related to that platform.
Twitter Cards are a good example here as they offer various customization options. For detailed info, you should read the official docs on Twitter Cards.
Use Absolute URLs in Your Open Graph Meta Tags
Consider using absolute URLs (including the site domain) rather than relative URLs where applicable (image URLs, for example) for better compatibility and consistency across different platforms.
The reason behind this is that some sites may not understand or support relative links and may cause broken images or 404 not found errors.
Combining the name and property Attributes in Meta Tags
The Open Graph tags with their own og: prefixes like og:title and og:description are added using the property attribute in the <meta> HTML tag.
And HTML standard tags like title and description are added using the name attribute in the <meta> HTML tag.
I personally combine both of the attributes in a single <meta> tag and haven't noticed any issues with the rich object previews when sharing the links.
The LinkedIn Post Inspector, for example, also mentions the usage of both attributes in a single <meta> tag. You can check that yourself as well (must be logged in to LinkedIn) or check the screenshot below.
However, if you prefer to separate them, that's fine too and there shouldn't be any issues.
Testing the Implementation of Open Graph Tags
After implementing the tags, you'll need to test and ensure that the tags are correctly added, and the link appears as rich objects when sharing on social sites.
The simple way to do this is by directly sharing the website or web page on the relevant social site like Twitter or LinkedIn to see how the shared link looks.
Some social platforms also offer their own testing tools such as the LinkedIn Post Inspector and Facebook Sharing Debugger. Note that you may need to log in to the relevant sites in order to use their tools.
Alternatively, there are some online websites that offer all-in-one social sites (tests for multiple social sites) testing tools that you can use like OpenGraph.xyz or Open Graph Checker by DNSChecker.org.
Complete List of Open Graph Meta Tags for SEO and Social Media
Below is a list of all the basic and recommended Open Graph meta tags that you may use in your website or web app.
It's best to use all of these even if you believe you might not need some, since having them won't hurt your site or app.
I've also explained about each tag below, including usage examples, ideal text character limits (to avoid truncation of long words and characters), and more.
Note
As mentioned above, some social sites like Twitter or Facebook may offer additional OG tags beyond the commonly used ones.
While I've included all the common and recommended tags for such platforms, you are welcome to further explore the documentation pages of such platforms if you'd like to add even more additional tags.
In the list below, the first 4 tags (title, description, image, and author) are considered to be the basic and standard HTML meta tags that should be present within your page code markup, even if you don't plan on making your links appear as rich objects in social sites like Facebook and Twitter.
This is because search engines and other apps (as mentioned above) may also utilize these meta tags to better represent your web page content.
title
The title of the web page.
Example:
<meta name="title" content="Open Graph Meta Tags - Complete Guide (2024)">
Ideally, the length should be within 60 characters.
description
The description of the web page.
Example:
<meta name="description" content="Learn everything you need to know about Open Graph Meta Tags. See how Open Graph tags help enhance your site links when shared on social media.">
Ideally, the length should be within 160 characters.
image
The URL of the hero or featured image of the page.
Example:
<meta name="image" content="https://w3things.com/blog/open-graph-meta-tags/media/open-graph-meta-tags.png">
Ideally, the dimensions of the image should be at least 1200x630px (1200 pixels wide and 630 pixels tall).
author
The author of the web page or its content (an article or blog post, for example).
Example:
<meta name="author" content="Danial Zahid">
The following 4 og: tags (og:title, og:type, og:image, and og:url) are considered basic metadata tags by the Open Graph protocol that are required for the web pages to appear as rich objects.
There are additional properties which are optional and are recommended if your web content is applicable. Read more about them here.
og:title
Similar to title, the title of the web page.
Example:
<meta property="og:title" content="Open Graph Meta Tags - Complete Guide (2024)">
Ideally, the length should be within 60 characters.
og:type
The type of content the web page deals with.
Example:
<meta property="og:type" content="article">
og:image
Similar to image, the URL of the hero or featured image of the page.
Example:
<meta property="og:image" content="https://w3things.com/blog/open-graph-meta-tags/media/open-graph-meta-tags.png">
Ideally, the dimensions of the image should be at least 1200x630px (1200 pixels wide and 630 pixels tall).
og:url
The canonical URL of the web page.
Example:
<meta property="og:url" content="https://w3things.com/blog/open-graph-meta-tags/">
og:description
Similar to description, the description of the web page.
Example:
<meta property="og:description" content="Learn everything you need to know about Open Graph Meta Tags. See how Open Graph tags help enhance your site links when shared on social media.">
Ideally, the length should be within 160 characters.
The following metadata tags are related to image if you're using the og:image metadata tag. Read more about additional structured metadata here.
og:image:secure_url
An alternate secure (HTTPS) URL of the hero or featured image if the web page requires HTTPS.
Example:
<meta property="og:image:secure_url" content="https://w3things.com/blog/open-graph-meta-tags/media/open-graph-meta-tags.png">
og:image:type
The MIME type (or media type) of the image.
Example:
<meta property="og:image:type" content="image/png">
Learn more about MIME types on this MDN page and some of the common MIME types for images here.
og:image:alt
The description of what's in the image or its alternative text.
Example:
<meta property="og:image:alt" content="Open Graph Meta Tags - Complete Guide (2024)">
This is for accessibility concerns, and you should always consider adding it.
og:image:width
The width of the image (without px).
Example:
<meta property="og:image:width" content="1200">
Ideally, the width of the image should be at least 1200px (1200 pixels wide).
og:image:height
The height of the image (without px).
Example:
<meta property="og:image:height" content="630">
Ideally, the height of the image should be at least 630px (630 pixels tall).
og:locale
The locale in which the tags on the page are marked up with. The default considered value is en_US.
Example:
<meta property="og:locale" content="en_US">
og:site_name
The name of the website the web page is a part of.
Example:
<meta property="og:site_name" content="W3Things">
og:updated_time
The date and time (in ISO 8601 format) the page was last updated or modified.
Example:
<meta property="og:updated_time" content="2023-12-11T00:00:00Z">
The following article properties are particularly useful when the web page is primarily an article or a blog post.
I personally don't use them for static pages like about or contact as they're not applicable, but feel free to use them for your static pages if you believe they're useful or applicable.
article:publisher
The publisher of the article.
Example:
<meta property="article:publisher" content="https://www.facebook.com/w3things/">
Ideally, this should be the URL of the Facebook page of the website or company.
article:author
The author of the article.
Example:
<meta property="article:author" content="https://www.facebook.com/iamdanialzahid">
Ideally, this should be the URL of the Facebook profile page of the author.
article:published_time
The date and time (in ISO 8601 format) when the article was first published.
Example:
<meta property="article:published_time" content="2023-12-18T14:00:00Z">
article:modified_time
Similar to og:updated_time, the date and time (in ISO 8601 format) the article was last updated or modified.
Example:
<meta property="article:modified_time" content="2023-12-11T00:00:00Z">
article:section
A broader section or category the article is a part of.
Example:
<meta property="article:section" content="Web Development">
article:tag
The tags or labels associated with the article.
Example:
<meta property="article:tag" content="Guide">
There can be multiple occurrences of this if the article has multiple tags.
The following tags are particularly used by X (formerly Twitter).
twitter:card
The type of the card to use for the post (or tweet) when embedded on X (formerly Twitter).
Example:
<meta name="twitter:card" content="summary_large_image">
twitter:site
The username handle of the website on X (formerly Twitter).
Example:
<meta name="twitter:site" content="@w3things">
twitter:creator
The username handle of the content creator on X (formerly Twitter).
Example:
<meta name="twitter:creator" content="@iamdanialzahid">
twitter:title
Similar to title and og:title, the title of the page or content.
Example:
<meta name="twitter:title" content="Open Graph Meta Tags - Complete Guide (2024)">
twitter:description
Similar to description and og:description, the description of the web page or content.
Example:
<meta name="twitter:description" content="Learn everything you need to know about Open Graph Meta Tags. See how Open Graph tags help enhance your site links when shared on social media.">
twitter:image
Similar to image and og:image, the hero or featured image of the page or content.
Example:
<meta name="twitter:image" content="https://w3things.com/blog/open-graph-meta-tags/media/open-graph-meta-tags.png">
twitter:image:alt
Similar to og:image:alt, an alternative text or description of the image or its contents. Useful for accessibility concerns.
Example:
<meta name="twitter:image:alt" content="Open Graph Meta Tags - Complete Guide (2024)">
Adding Open Graph Tags to Your Website or Web Application
Adding OG tags to your site is quite simple. All you have to do is add the meta tag line that you want in your website's <head> tag section.
Now, how you add them to your site's HTML <head> element depends on how you have set up your site development workflow.
Below, I've mentioned the common scenarios for adding them to your website depending on whether you have a custom-coded website or using a CMS.
Using Open Graph on a Custom Developed Site
If you're using a static site generator like Eleventy or Gatsby, you might probably have an include file like header.html or head.html where you'd have the starting portion of the basic HTML markup, including the <head> tag.
In such a case, you'd basically add all the relevant tags in one central place, and they'll be added to your entire site when your site is built.
The same concept is generally true if you're using other web technologies, frameworks, or languages like PHP, Next.js, React.js, Vue.js, etc.
I'd advise reading up the official docs of the relevant framework or technology stack you're using to figure out where and how you should add the HTML meta tags to your site.
Setting up Open Graph on WordPress Using an SEO Plugin
If you're using a content management system like WordPress, you might not have direct access to your website files. In that case, you'll need to look for and use an SEO plugin like Rank Math SEO or Yoast SEO.
These plugins are specifically used to enhance the WP site SEO in addition to providing other helpful tools like redirection management.
I'd personally recommend using Rank Math SEO as I used it for a long time for W3Things before I transferred the site from WordPress to 11ty SSG. It's straightforward to use and offers many features for free.
Conclusion
That's all you needed to know about the Open Graph meta tags.
In this guide, we covered all the useful and recommended HTML and Open Graph metadata tags that are used for making your website or web page appear as rich objects when shared on social media platforms.
If you need any assistance in setting up Open Graph meta tags for your website or app, feel free to get in touch with me via [email protected].
And if you believe I missed any important tag or made a mistake, please let me know.
FAQs Regarding Open Graph Meta Tags
What are Open Graph meta tags?
Open Graph metadata tags are used to enhance the website link appearance when shared on social media platforms like Facebook and web apps like Discord.
Learn more about them in detail in the above section of this guide.
What are the important Open Graph tags?
The important and basic OG tags are og:title, og:type, og:image, and og:url.
Is Open Graph good for SEO?
It may not have a direct benefit for SEO, since it was originally designed for sharing links on social media sites.
Some search engines may make use of Open Graph to further provide enhanced search results.
It's best to refer to the official documentation of the relevant search engine to know if they support Open Graph.
How do I check Open Graph metadata?
If you'd like to check your site's Open Graph metadata, you can do so by either checking the source code of the web page in a web browser (usually, the shortcut is CTRL+U), or by inspecting the page using browser developer tools (usually, F12).
Alternatively, if you have access to your site files, look for the file or code block that contains the HTML <head> tag.
Does Facebook still use Open Graph?
Yes, Facebook still uses Open Graph and so do other social media sites like X (formerly Twitter) and LinkedIn.
Generally speaking, you should always mark up your website pages with all the basic and recommended OG meta tags as explained above in the article.
Does Google use Open Graph?
Short answer, probably no.
The Open Graph protocol is primarily utilized by social sites like Facebook and Twitter.
On the other hand, Google, apart from the basic meta tags like title and description, makes use of the structured data (Schema) to provide enhanced and rich previews of website content and links on its SERPs.
That being said, I don't exactly know if and what OG meta tags Google uses. It may or may not utilize OG tags.
Additional Resources
Here are some links if you'd like to know more about Open Graph or HTML metadata tags in general.
- A Guide to Sharing for Webmasters (Source: Meta)
- Meta Tags and Attributes that Google Supports (Source: Google Search Central)
<meta>: The metadata element (Source: MDN)- What Are SERPs? (Source: Backlinko)
- Social discovery (Source: web.dev)
