Open Graph is a set of HTML tags that tell social media platforms what to show when someone shares your page

When you paste a link into Facebook, Twitter, or LinkedIn, those platforms don't read your entire page. Instead, they look for Open Graph tags — small pieces of code in your page's HTML that describe what the link is about. Without these tags, social platforms guess: they might pull the wrong image, show a generic title, or display nothing useful at all. With them, you control exactly what appears in the preview.

Open Graph was created by Facebook in 2010 to standardize how websites communicate with social networks. Today it's used by most major platforms, including Pinterest, LinkedIn, Slack, and Discord. The tags live in your page's <head> section and follow a simple format: a property name and a content value.

The most common Open Graph tags are og:title (the headline shown in the preview), og:description (the text below it), og:image (the thumbnail), and og:url (the page address). You can also specify the type of content — article, video, product — and add extra details like publication date or author name.

Key Takeaways

  • Open Graph tags are HTML code that tell social platforms what image, title, and description to show when a link is shared.
  • The four essential tags are og:title, og:description, og:image, and og:url; without them, platforms make their own guesses.
  • Open Graph images should be at least 1200 by 630 pixels and under 8 MB to display correctly across all platforms.
  • You can test your tags using Facebook's Sharing Debugger or similar tools to see exactly what will appear before you publish.

The four essential Open Graph tags and what each one does

Every page should include at least four tags. The og:title tag sets the headline — keep it under 60 characters so it doesn't get cut off. The og:description tag holds the preview text, usually 150 to 160 characters. The og:image tag points to the image URL that appears as the thumbnail; use a full URL starting with https://, not a relative path. The og:url tag specifies the canonical page address, which matters if your page has multiple URLs or parameters.

Here's what these tags look like in your HTML:

<meta property="og:title" content="How to Bake Sourdough Bread"> <meta property="og:description" content="Learn the step-by-step process for making sourdough at home, from starter to crust."> <meta property="og:image" content="https://example.com/sourdough.jpg"> <meta property="og:url" content="https://example.com/sourdough-guide">

If you don't include og:image, Facebook and other platforms will try to pull an image from your page automatically — often the wrong one. If you don't include og:title, they'll use your page's HTML title tag instead, which may be too long or generic. The og:url tag prevents confusion when a page is accessible from multiple addresses.

Image size, format, and technical requirements

Open Graph images need to meet specific standards or they won't display. The minimum size is 1200 by 630 pixels; smaller images may appear blurry or get rejected. The maximum file size is 8 MB, though most platforms work best with images under 2 MB. Use JPG or PNG format — avoid WebP or other modern formats that older platforms don't support.

The aspect ratio matters too. A 1200 by 630 image is a 1.91:1 ratio, which displays as a wide rectangle on most platforms. If you use a square image (1:1 ratio), it will appear smaller in the preview. Some platforms crop images differently: Twitter may show a taller crop than Facebook, so test your image on each platform you care about.

Make sure the image URL is publicly accessible and doesn't require login. If you host the image on a CDN or image service, verify that the URL works from outside your network. Broken image URLs are one of the most common reasons Open Graph previews fail.

Optional tags for articles, videos, and other content types

Beyond the four essentials, you can add tags that describe your content more precisely. For articles, use og:type set to "article", plus article:published_time, article:author, and article:section. For videos, use og:type set to "video.other" and include og:video with the video URL, plus og:video:width and og:video:height.

You can also add og:locale to specify the language (en_US, fr_FR, etc.), og:site_name to show your website's name separately from the page title, and og:determiner to control whether "a" or "an" appears before your title. These tags don't change how most people see your link, but they help platforms organize and categorize your content correctly.

If your page has multiple language versions, use og:locale:alternate to list them. This tells platforms that the same content exists in other languages, which can improve how it's shared in different regions.

How to test your Open Graph tags before publishing

Don't guess whether your tags work — test them. Facebook's Sharing Debugger (facebook.com/developers/tools/debug/sharing) lets you paste your URL and see exactly what preview will appear. It shows the image, title, description, and any errors in your tags. If something is wrong, the tool tells you what's missing or malformed.

LinkedIn has its own Post Inspector (linkedin.com/post-inspector) for testing how your link appears on LinkedIn. Twitter doesn't have an official tool, but you can use a third-party service like metatags.io or opengraph.xyz to preview how your link will look across multiple platforms at once.

If you change your tags after publishing, the preview won't update immediately — platforms cache the old version. Facebook's Sharing Debugger has a "Scrape Again" button that forces an update. LinkedIn may take a few hours to refresh. Twitter caches for 24 hours or more, so if you need an immediate update, delete and re-share the link.

Common mistakes that break Open Graph previews

The most frequent error is using a relative image path instead of a full URL. If your og:image tag says "/images/photo.jpg" instead of "https://example.com/images/photo.jpg", platforms won't find the image. Always use the complete https:// URL.

Another common mistake is forgetting the property attribute. The tag must say property="og:title", not name="og:title". The name attribute is for regular meta tags; Open Graph requires property. Mixing them up means platforms ignore your tags.

Using an image that's too small or in the wrong format is also common. If your image is 600 by 315 pixels, it's half the recommended size and may appear pixelated. If it's a WebP file, older platforms won't display it. Test your image size and format before you publish.

Finally, don't include special characters or quotes in your tag content without escaping them. If your title contains an apostrophe or quotation mark, wrap it in HTML entities (' or ") or the tag will break.

How Open Graph works with Twitter, LinkedIn, and other platforms

Twitter uses its own tag system called Twitter Cards, but it falls back to Open Graph tags if Twitter Card tags aren't present. If you want to customize how your link appears on Twitter specifically, add twitter:card, twitter:title, twitter:description, and twitter:image tags. Otherwise, Twitter will use your og: tags.

LinkedIn reads Open Graph tags directly and doesn't have its own alternative system. If your og:image is missing or broken, LinkedIn shows no image at all. LinkedIn also respects og:type, so setting it to "article" helps LinkedIn categorize your content correctly.

Pinterest, Slack, and Discord all use Open Graph tags as their primary source of preview information. Slack will also read the page title and first image if Open Graph tags are missing, but the preview will be less reliable. Discord shows og:image, og:title, and og:description in embeds when someone shares your link in a server.

Frequently Asked Questions

Do I need Open Graph tags if I'm not sharing on social media?

Not immediately, but they're worth adding anyway. Even if you don't actively share your pages, other people will share them for you — in emails, chat apps, and social networks. Open Graph tags ensure those shares look professional and accurate, which can increase click-through rates.

What happens if I don't include Open Graph tags?

Platforms will try to create a preview from your page's HTML title, meta description, and the first image they find. This often results in a generic or incorrect preview. Your page might appear with no image, a logo instead of relevant content, or a title that's too long or unclear.

Can I use the same image for all my pages?

You can, but it's not ideal. A generic site logo or banner works for some pages, but pages about different topics should have different images. Unique, relevant images get more clicks when shared. If you're short on images, at least use different ones for different content categories.

How often should I update my Open Graph tags?

Update them whenever your page content changes significantly. If you change the title, description, or main image of a page, update the corresponding Open Graph tags. For news articles or time-sensitive content, you may update them weekly or daily. For evergreen content, once is usually enough.

Do Open Graph tags affect SEO or search rankings?

Not directly. Search engines like Google don't use Open Graph tags for ranking. However, better social media previews lead to more clicks and shares, which can indirectly improve traffic and engagement. Open Graph tags are for social platforms, not search engines.