Everything you should know about Open Graph
Santiago Galán - May 3, 2024What is Open Graph?
Open Graph is a standarized format of metadata released by Facebook in 2010. It enables websites to show information about their pages when a link is shared on social media.
The basic and most used Open Graph metatags today are: title, description and image. The preview generated with the combination of these metatags is sometimes called a card or social card.
Does Open Graph metatags improve SEO?
Open Graph metatags do not directly influence search engine rankings. But they can indirectly enhance SEO by boosting click-through rates and social media engagement, since they make links more visually appealing and occupy more screen real estate.
What is the difference between Open Graph and Twitter Cards?
While most social media platforms supports Open Graph, Twitter (now X) decided to create their own set of metatags to show link previews. They are called Twitter Cards and they work the same way as OG. You can use both and even show different content for Twitter/X. For example, you can use a modified image to avoid overlap with their new floating label.
Recommended metatags
Metatag | Description |
|---|---|
og:title | It can be the same text as the title tag, or a different one tailored for social media. |
og:description | It can be the same text as the description, or a different one tailored for social media. |
og:image | Must be the URL of an image file that is less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. SVG is not supported. |
og:image:width and og:image:height | The dimensions of your OG image. The recommended size is 1200x630 pixels, but most platforms also support square images. |
og:url | Identifies the canonical URL of the content. In other words, the URL you intend to share. |
og:site_name | Indicates the name of the website or organization that ows the content. Some platforms such as Slack, Discord or Telegram use this tag in their previews. |
twitter:title | Same as og:title but for Twitter/X. |
twitter:image | Same as og:image but for Twitter/X. |
twitter:image:width and twitter:image:height | Same as og:image:width and og:image:height but for Twitter/X. |
twitter:card | This tag is required to show any type of preview on Twitter/X. Use value "summary" if your image is square and "summary_large_image" if your image is landscape. |
twitter:site | Defines the username of the website, app or organization. |
twitter:creator | Defines the username of the individual creator of the content. |
How to add Open Graph metatags to your website
Copy this code and paste inside your HTML <head> tag. Change the values with your content and you are ready to go.
<!-- Open Graph Metatags -->
<meta property="og:title" content="Your title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="Your image URL" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="Your URL" />
<meta property="og:site_name" content="Your site name" />
<!-- Twitter/X Metatags -->
<meta name="twitter:title" content="Your title" />
<meta name="twitter:image" content="Your image URL" />
<meta name="twitter:image:width" content="Your image width" />
<meta name="twitter:image:height" content="Your image height" />
<meta name="twitter:card" content="Your card type" />How to validate if your Open Graph metatags are working correctly
You can use this free Social Card Validator tool.