Open Graph is metadata that tells social media platforms what to show when someone shares your link

When you paste a link into Facebook, Twitter, or LinkedIn, those platforms don't just grab whatever text appears first on the page. They look for Open Graph tags — invisible lines of code that you place in a website's header to control exactly what image, headline, and description appear in the preview card. Without these tags, social platforms make their own guesses, often pulling the wrong image or a fragment of text that makes no sense out of context.

Open Graph was created by Facebook in 2010 to solve this problem. It is now the standard that nearly every social platform uses, including Twitter, LinkedIn, Pinterest, Slack, and Discord. When you write Open Graph tags correctly, you control the story that spreads when someone shares your link.

Key Takeaways

  • Open Graph tags are HTML code placed in a page's head section that tell social platforms what image, title, and description to display when the link is shared.
  • The four essential tags are og:title, og:description, og:image, and og:url — without these, platforms will guess and often get it wrong.
  • The og:image tag is the most visible part of a shared link, so choosing a clear, on-brand image matters more than the other tags.
  • You can test your Open Graph tags using Facebook's Sharing Debugger or similar tools to see exactly what will appear before you publish.
  • Different platforms may display Open Graph information differently, and some platforms like Twitter have their own additional tags that override Open Graph defaults.

The four essential Open Graph tags and what they do

Every page should have at least four Open Graph tags in the <head> section of the HTML. The first is og:title, which sets the headline that appears above the preview card. This should be the same as your page title or close to it — usually 50 to 60 characters so it does not get cut off on mobile.

The second is og:description, which is the text that appears below the headline. Keep this to 150 to 160 characters. Write it as if someone will read only this sentence and decide whether to click. "Learn more about our product" tells them nothing; "Reduces energy bills by 30% without replacing your HVAC system" tells them whether they care.

The third is og:image, which is the image that appears in the preview card. This should be at least 1200 by 630 pixels and no larger than 5 megabytes. Use a real photograph or graphic, not a logo. The image is the first thing someone sees when a link is shared, so it carries more weight than the text.

The fourth is og:url, which is the permanent web address of the page. This should be the full URL, including https:// — for example, https://example.com/blog/how-to-choose-a-router. This tag prevents confusion when the same content lives at multiple URLs.

How to write Open Graph tags in your HTML

Open Graph tags are written as meta tags inside the <head> section of your HTML, above the closing </head> tag. Here is what the four essential tags look like:

<meta property="og:title" content="How to Choose a Router for Your Home Network"> <meta property="og:description" content="A guide to understanding bandwidth, range, and security features so you pick the right router for your needs."> <meta property="og:image" content="https://example.com/images/router-guide.jpg"> <meta property="og:url" content="https://example.com/blog/how-to-choose-a-router">

Notice that each tag uses property= (not name=) and that the content is wrapped in quotes. The og:image and og:url values must be full URLs, not relative paths. If you use a relative path like /images/router.jpg, social platforms will not be able to find the image.

If you are using a content management system like WordPress, Yoast SEO, or Squarespace, you usually do not have to write these tags by hand. The plugin or platform writes them for you when you fill in a title, description, and featured image. But if you are building a site from scratch or editing the HTML directly, you must add these tags yourself.

Why og:image is the most important tag

When someone shares a link on Facebook or LinkedIn, the image is the dominant element of the preview card. The headline and description are secondary. A weak or irrelevant image means fewer people will click, even if your headline is strong.

Choose an image that is visually clear at small sizes — the preview card on mobile is often only 300 pixels wide. Avoid images with small text, busy backgrounds, or colors that blend together. A photograph of a person, a product, or a clear graphic works better than a screenshot of a webpage or a generic stock photo.

The image should also match the content. If your article is about choosing a router, show a router or a person using a network. If it is about a blog post on energy efficiency, show a thermostat or a house, not a generic "technology" image. Relevance increases click-through rates.

Testing your Open Graph tags before publishing

Before you publish a page, test your Open Graph tags to see exactly what will appear when someone shares the link. Facebook provides the Sharing Debugger at facebook.com/developers/tools/debug. Paste your page URL into the tool, and it will show you the preview card exactly as it will appear on Facebook.

If the image does not appear, the debugger will tell you why — usually because the image URL is broken or the file is too large. If the title or description is cut off, you will see where it breaks and can shorten the text. The debugger also shows you any errors in your Open Graph syntax.

For Twitter, use the Card Validator at cards-dev.twitter.com/validator. Twitter has its own tags (like twitter:card and twitter:image) that override Open Graph defaults, so testing on Twitter's tool is important if your audience is there.

Open Graph tags for different types of content

The four essential tags work for most pages, but Open Graph also supports optional tags for specific content types. If you are sharing a video, add og:video with the URL of the video file. If you are sharing an article, add og:type with the value article, and optionally add article:published_time and article:author.

For a product page, you can add og:price:currency and og:price:amount so the preview card shows the price. For a music or podcast page, add og:audio with the URL of the audio file. Most of these optional tags are used by only a few platforms, but they do not hurt if you include them.

The most common optional tag is og:type, which tells platforms what kind of content the page contains. The default is website, but you can also use article, video.movie, music.song, or other values. This helps platforms decide how to display the preview and whether to show additional information like publish date or author.

Common mistakes and how to avoid them

The most common mistake is using a relative image path instead of a full URL. If your og:image tag says /images/router.jpg, Facebook will not know which domain to look on and will not find the image. Always use the full URL: https://example.com/images/router.jpg.

The second mistake is making the title or description too long. If your og:title is 100 characters, it will be cut off on mobile and look incomplete. Test on the Sharing Debugger to see where the text breaks, then trim it to fit.

The third mistake is using the same image for every page on your site. Each page should have its own og:image that reflects the specific content. A generic company logo or banner does not tell someone what the page is about and reduces click-through rates.

The fourth mistake is forgetting to update Open Graph tags when you update the page content. If you change the headline or featured image on your site, update the og:title and og:image tags to match. Old cached previews will eventually expire, but updating the tags ensures new shares show the current information.

Frequently Asked Questions

Do I need Open Graph tags if my site is not shared on social media?

If your site is never shared on social platforms, Open Graph tags are not necessary. But most websites are shared at least occasionally, and the tags take only a few minutes to add. They also do not hurt if they are there and not used, so it is worth including them as a precaution.

What happens if I do not include Open Graph tags?

Social platforms will try to guess what to show by pulling the first image and text they find on the page. This often results in a broken image, a confusing headline, or a fragment of text that makes no sense. The preview card will be much less appealing and fewer people will click.

Can I use the same og:image for multiple pages?

Technically yes, but it is not recommended. Each page should have its own image that reflects its specific content. Using the same image for every page makes the preview cards look generic and reduces click-through rates. The exception is a homepage or landing page, where a consistent brand image makes sense.

How often do social platforms check for Open Graph tags?

Most platforms cache the preview information for a few days or weeks. If you change your Open Graph tags, the old preview may still appear for a while. Use the Sharing Debugger or Card Validator to force a refresh and see the new preview when ready.

Do I need different Open Graph tags for mobile and desktop?

No. Open Graph tags are the same for all devices. However, test your preview on both mobile and desktop to make sure the image and text look good at different sizes. The image dimensions should be the same, but it may appear smaller on mobile.