What Open Graph Does

Open Graph is a set of invisible instructions that tell social media platforms — Facebook, LinkedIn, Twitter, Pinterest — what image, headline, and description to display when someone shares a link. Without Open Graph tags, the platform has to guess, and it usually guesses wrong.

When you paste a URL into Facebook, the platform reads the Open Graph tags embedded in that page's code and pulls out the title, description, and image the website owner chose. If those tags are missing, Facebook scrapes whatever text and images it finds first, which might be a navigation menu, a logo, or an unrelated photo.

Open Graph tags live in the head section of a webpage's HTML — the part you never see when you visit the site. They look like this: <meta property="og:title" content="The actual headline you want to show">. A developer adds one tag for the title, one for the description, one for the image, and a few others depending on what the page is.

Key Takeaways

  • Open Graph tags are hidden instructions in a webpage's code that tell social platforms what title, image, and description to display when the link is shared.
  • Without these tags, platforms like Facebook and LinkedIn display whatever text and images they find first, which is often wrong or incomplete.
  • The most important tags are og:title, og:description, og:image, and og:url — these four control what most people see when they click a shared link.
  • The image tag requires a specific image file path and dimensions, so a developer has to choose and upload the right image before the tag will work.
  • Testing Open Graph tags before publishing means using a platform's built-in preview tool or a third-party debugger to see exactly what will appear when someone shares the link.

The Four Core Tags Every Page Needs

Most websites only need four Open Graph tags to control how their links look on social media. The first is og:title, which sets the headline. This should be the same as the page title or close to it — something a person would actually want to read, not a keyword-stuffed string.

The second is og:description, a short summary of what the page contains, usually 150 to 160 characters. This is the text that appears below the headline in the preview card. It should tell someone why they should click, not repeat the title.

The third is og:image, which points to a specific image file — a JPG or PNG — that will display when the link is shared. This has to be a full web address, not just a filename. The image should be at least 1200 pixels wide and 630 pixels tall, though larger is fine. If the image is too small or the file path is wrong, the platform will not display it.

The fourth is og:url, the canonical address of the page itself. This tells the platform which page the tags belong to, which matters when a website has multiple versions of the same content or when the page is accessed through different URLs.

Why the Image Tag Fails Most Often

The og:image tag breaks more often than the others because it requires both the correct file path and the correct dimensions. A developer has to upload an image to the website's server, copy the full web address of that image, and paste it into the tag. If the path is wrong by even one character, or if the image is 600 pixels wide instead of 1200, the platform will not display it.

Some platforms are stricter than others. Facebook will show a broken image icon if the dimensions are wrong. LinkedIn might show no image at all. Pinterest requires the image to be taller than it is wide, so a square image will not work there even if it works on Facebook.

The best practice is to create one image specifically for sharing — not a screenshot of the page, not a logo, but a designed graphic that looks good as a small card. Then test it before publishing to make sure the platform actually displays it.

How to Add Open Graph Tags to Your Site

If you use a website builder like WordPress, Wix, or Squarespace, you usually do not write the tags yourself. Instead, you fill in fields labeled "Social Title," "Social Description," and "Social Image" in the page settings. The platform generates the HTML tags behind the scenes.

If you are editing HTML directly, you paste the tags into the <head> section of your page, before the closing </head> tag. A developer typically adds them right after the regular page title tag. The tags do not affect how the page looks to visitors — they are purely for social platforms.

Some content management systems let you set default Open Graph tags for the whole site, then override them on individual pages. This is useful if most of your pages should show the same image or description, but some need something different.

Testing Open Graph Tags Before You Publish

Do not assume your tags are correct just because you wrote them. Social platforms read and cache Open Graph data, and if you publish with a broken tag, the platform might remember the broken version for days or weeks even after you fix it.

Facebook provides a tool called the Sharing Debugger. You paste your page URL into it, and it shows you exactly what Facebook will display when someone shares the link — the title, description, and image as they will appear. If something is wrong, the debugger usually tells you why.

LinkedIn has a similar tool called the Post Inspector. Twitter uses the Card Validator. Pinterest has its own preview tool. Each platform reads the tags slightly differently, so testing on the platform where your link will actually be shared matters most.

If you find a problem after publishing, fix the tag in your code, then use the debugger to clear the platform's cached version. Most platforms have a button that says "Scrape Again" or "Fetch New Shares" — clicking it tells the platform to read your tags again and update what it has stored.

Open Graph for Different Types of Content

The four core tags work for most pages, but Open Graph has optional tags for specific content types. If you are sharing a video, you can add an og:video tag that points to the video file. If you are sharing an article, you can add og:author and og:published_time to tell platforms when it was written and who wrote it.

E-commerce sites often add og:price and og:currency so that when someone shares a product link, the price appears in the preview. Recipe sites add og:recipe tags for cooking time and ingredients. These optional tags do not change how most platforms display the link, but they provide extra information that some platforms or browser extensions can read.

For most websites, the four core tags are enough. The optional tags are useful only if you are building something specialized and you know the platforms you are targeting support them.

Common Mistakes That Break Open Graph

The most common mistake is forgetting the og:image tag entirely. A page with a perfect title and description but no image will often not display anything visual when shared, which makes people less likely to click.

The second mistake is using a relative image path instead of a full web address. A tag that says og:image="/images/photo.jpg" will not work because the platform does not know what domain to look in. It has to be og:image="https://yoursite.com/images/photo.jpg".

The third mistake is not updating the og:image tag when you update the page. If you change the hero image on your homepage but forget to change the og:image tag, people will see the old image when they share the link, which looks broken or outdated.

The fourth mistake is using an image that is too small. A 400-pixel-wide image might display on some platforms but not others. Sticking to 1200 by 630 pixels or larger prevents this problem.

Frequently Asked Questions

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

If people might ever paste your link into a text message, email, or chat platform, Open Graph tags help. Even if you do not post on social media yourself, visitors will share your content, and the tags control what they see. Most websites benefit from having them.

What happens if I do not add Open Graph tags?

Platforms will still display something when the link is shared — they will just guess. They might pull the page title, the first paragraph of text, and the first image on the page, which is often wrong. The preview card will look incomplete or confusing, and fewer people will click.

Can I use the same image for all my pages?

Yes, but it is not ideal. A generic company logo or banner works for some pages, but pages with different topics should have different images. A preview card with a relevant image gets more clicks than one with a generic image, so creating page-specific images is worth the effort.

How long does it take for changes to show up on social media?

It depends on the platform. Facebook and LinkedIn cache Open Graph data and might not update for hours or days unless you use their debugger tools to force a refresh. Twitter reads tags fresh each time, so changes show up when ready. Always use the platform's testing tool to confirm the change took effect.

Do Open Graph tags affect my search engine ranking?

No. Search engines like Google do not use Open Graph tags for ranking. They are purely for social media platforms. Open Graph tags can indirectly help by making your links more clickable on social media, which drives more traffic, but the tags themselves do not influence search results.