How Open Graph Tags Control What Shows When You Share a Link

Open Graph tags tell social media platforms what to display when someone shares your link

Open Graph tags are snippets of code you add to a webpage's HTML that control what appears when the link is shared on Facebook, Twitter, LinkedIn, Pinterest, and other social platforms. Without them, the platform guesses — it might pull the wrong image, use the first sentence of text, or show nothing useful at all. With them, you decide exactly what headline, description, and image appear in the preview.

They live in the <head> section of your HTML as <meta> tags. When someone pastes your URL into a social feed, the platform's crawler reads these tags and uses them to build the preview card. If the tags are missing or wrong, the preview looks broken or irrelevant, and fewer people click through.

Key Takeaways

Open Graph tags are meta tags in your HTML head that control the headline, description, and image shown when a link is shared on social media.
The four essential tags are og:title, og:description, og:image, and og:url — without these, platforms display unpredictable or incomplete previews.
The og:image tag is the most important for click-through rate because it is the first thing people see in a social feed.
You can test your tags using Facebook's Sharing Debugger or similar tools to see exactly what will appear before you publish.
Different platforms (Twitter, LinkedIn, Pinterest) have their own tag variations, but the core Open Graph tags work across all of them.

The four essential Open Graph tags you need

Every page should have at least four tags: og:title, og:description, og:image, and og:url. The title is what appears as the headline in the preview — keep it under 60 characters so it does not get cut off. The description is the text below the headline, usually 155 to 160 characters. The image is the visual that appears alongside the text, and the URL is the canonical address of the page being shared.

Here is what they look like in your HTML:

The og:image URL must be a full web address, not a relative path. The image itself should be at least 1200 by 630 pixels for best results on most platforms, though smaller images will still display. If you do not include og:image, Facebook and LinkedIn will try to find an image on the page themselves, which often produces poor results.

Why og:image matters most for clicks

The image is the first thing a person sees when a link appears in their feed. A relevant, high-contrast image with readable text gets clicked far more often than a generic or blurry one. If your og:image is missing or broken, the preview looks incomplete and people scroll past.

Use an image that represents the content — for a blog post about gardening, show a garden or plant, not your logo. For a product page, show the product itself. Text overlaid on the image (like a headline or date) can help, but keep it simple so it is readable at small sizes.

Test your image by pasting your URL into Facebook's Sharing Debugger (facebook.com/sharing/debugger). The tool shows you exactly what will appear in a preview, and you can see if the image is cut off, stretched, or missing entirely. If it looks wrong, adjust the image size or the og:image URL and test again.

Optional tags that improve the preview

Beyond the four essentials, several optional tags give you more control. og:type tells the platform what kind of content this is — use "article" for blog posts, "product" for items you are selling, or "website" for general pages. og:site_name is your website or brand name, which appears in smaller text below the title on some platforms.

og:locale specifies the language and region, useful if your site serves multiple countries. article:published_time and article:modified_time tell platforms when the content was first published and last updated, which some use to sort or rank results. For video or audio content, og:video lets you specify a video URL that plays in the preview instead of a static image.

Most websites do not need all of these. Start with the four essentials, add og:type and og:site_name if they fit your content, and add the others only if your analytics show they make a difference.

How different platforms use Open Graph tags

Facebook and Instagram follow Open Graph closely and display the tags almost exactly as written. LinkedIn also uses them but sometimes adds its own formatting. Twitter has its own tag system called Twitter Cards (using <meta name="twitter:title"> instead of <meta property="og:title">), but it falls back to Open Graph tags if Twitter Card tags are missing.

Pinterest reads og:image and og:description but prioritizes its own pin descriptions if users have added custom text. LinkedIn respects og:image and og:title but may override the description with text from the page itself. Slack uses Open Graph tags to build previews when links are shared in channels.

Because platforms vary, the safest approach is to include both Open Graph tags and Twitter Card tags. Twitter Card tags take precedence on Twitter, but Open Graph tags work everywhere else. You do not need to duplicate every tag — just add the Twitter versions for title, description, and image if you want to customize them separately for Twitter.

Testing your tags before publishing

Never assume your tags are correct without testing. Facebook's Sharing Debugger (facebook.com/sharing/debugger) is the most reliable tool. Paste your URL, and it shows you exactly what the preview will look like, including the image size, title, and description. If something is wrong, it tells you why — for example, "og:image URL returned a 404" or "og:title is missing".

LinkedIn has its own Post Inspector (linkedin.com/post-inspector). Twitter does not have an official debugger, but you can paste a URL into a tweet draft and see the preview before posting. Pinterest shows a preview when you try to save a pin from your site.

If the debugger shows an error, fix the tag in your HTML, wait a few minutes for the platform's cache to clear, then test again. Some platforms cache previews for hours, so if you change a tag and the preview does not update immediately, try the "Scrape Again" button in the debugger or wait and test later.

Common mistakes that break previews

The most common error is using a relative image path instead of a full URL. <meta property="og:image" content="/images/photo.jpg"> will not work — it must be <meta property="og:image" content="https://yoursite.com/images/photo.jpg">. Platforms cannot find the image without the domain name.

Another frequent mistake is forgetting the property= attribute. The correct syntax is <meta property="og:title">, not <meta name="og:title">. Using name= instead of property= means platforms will not recognize the tag.

Mismatched or missing og:url tags can also cause problems. The og:url should match the actual URL of the page — if your page is at https://yoursite.com/blog/post-1, the og:url should be exactly that, not a shortened URL or a different version. If og:url is missing, most platforms use the URL from the address bar, which usually works, but it is better to be explicit.

Frequently Asked Questions

Do I need Open Graph tags on every page?

Yes, every page that might be shared should have them. At minimum, add the four essential tags to your homepage, blog posts, product pages, and any other content people might link to. If you have hundreds of pages, you can generate the tags dynamically using your site's content management system so you do not have to write them by hand.

What size should my og:image be?

The recommended size is 1200 by 630 pixels, which works well on most platforms. Smaller images (as small as 200 by 200 pixels) will display but may look blurry or stretched. Avoid very large files — keep the image under 5 MB so it loads quickly. Use a common format like JPG or PNG.

Can I use the same og:image for every page on my site?

You can, but it is not ideal. A generic image (like your logo) will appear the same no matter what page is shared, which makes the preview less relevant and reduces clicks. If each page has its own unique og:image that represents its content, people are more likely to click through. For blog posts, use a featured image. For product pages, use the product photo.

What happens if I do not include Open Graph tags?

Platforms will try to build a preview from the page itself. They might pull the first image they find (which could be a logo or ad), use the first sentence of text (which might be a navigation menu), or show nothing at all. The preview often looks broken or irrelevant, and fewer people click the link. Open Graph tags prevent this by giving platforms exactly what to display.

Do Open Graph tags affect my search engine ranking?

No, search engines like Google do not use Open Graph tags for ranking. They are only for social media platforms. However, better social media previews lead to more clicks and shares, which can indirectly help your traffic and visibility. Open Graph tags are about user experience on social platforms, not SEO.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.