What Is Open Graph and Why Your Links Look Broken Without It

October 17, 2026 • NOFYI Editorial Team

You paste a link into a message, and instead of a neat preview with a title, description, and image, you get a bare URL or a grey box. Or the preview shows the wrong image, an old title, or no description at all. The page itself may be fine. The problem is often that the page is missing Open Graph tags.

Open Graph is a simple set of tags that tells social platforms and messaging apps how to display a link. When those tags are present and correct, your links look complete and trustworthy. When they are missing or wrong, the preview can look broken, even if the page is excellent.

This guide explains what Open Graph is, what the main tags do, and how to test your pages. It includes a worked example, common problems, and the limits of what Open Graph can and cannot do.

What Is Open Graph?

Open Graph is a protocol that lets a web page describe itself in a structured way. It was introduced by Facebook in 2010, and it is now used by many platforms, including Facebook, LinkedIn, X, Slack, Discord, WhatsApp, Telegram, iMessage, and others. When someone shares a link, the platform reads the page, looks for Open Graph tags, and uses them to build a preview card.

Open Graph tags live in the head section of a page, in the HTML that visitors do not normally see. They are meta tags with a property attribute that starts with og:. For example, og:title sets the title for the preview, og:description sets the description, and og:image sets the image.

Think of Open Graph as a label on the outside of a package. The page is the package. The label tells the delivery system what to show on the outside, so people can decide whether to open it. Without a good label, the system guesses, and guesses are often wrong.

The Main Open Graph Tags

There are many Open Graph tags, but four cover most everyday needs.

og:title is the title shown in the preview. It should be clear, accurate, and close to the real page title. Keep it short enough to read at a glance. Avoid clickbait or titles that do not match the page.

og:description is a short summary of the page. It should explain what the reader will find, in one or two sentences. Avoid repeating the title word for word. A useful description helps people decide whether the link is worth opening.

og:image is the image shown in the preview. It should be relevant, clear, and correctly sized. A missing, tiny, or unrelated image is one of the most common reasons a preview looks broken.

og:url is the canonical address of the page. It helps platforms treat different versions of the same URL, such as with or without tracking parameters, as the same page. It also helps avoid duplicate previews.

Two other tags are often useful. og:type describes the kind of content, such as website or article. og:site_name gives the name of the site. Some platforms also use og:image:width and og:image:height to know the image size before loading it.

There is also a related set of tags for X, often called Twitter Card tags, such as twitter:card, twitter:title, twitter:description, and twitter:image. Many sites set both Open Graph and Twitter Card tags so previews look right in more places.

Why Links Look Broken Without Open Graph

When a page has no Open Graph tags, a platform must guess what to show. It may pick the first image it finds, which could be a logo, an icon, or an unrelated picture. It may pick the first text it finds, which could be a navigation menu, a cookie notice, or a footer. It may show no image at all, or a blank box.

Even when tags exist, previews can look broken for other reasons. The image may be too small, the wrong shape, or blocked. The description may be too long and get cut off. The page may have been updated, but the platform may be showing a cached preview from an earlier version. Each of these has a different fix, which is why testing matters.

A broken-looking preview does not mean the page is broken. It means the preview information is missing, wrong, or outdated. Fixing Open Graph tags often fixes the preview without changing the visible page at all.

How to Add Open Graph Tags

How you add Open Graph tags depends on how your site is built. On WordPress, an SEO plugin such as Rank Math, Yoast SEO, or a similar tool can generate Open Graph tags automatically and let you set a title, description, and image for each post. That is the easiest route for most site owners.

On a custom site, you add the tags directly to the head section of each page. The basic pattern looks like this in words: one tag for title, one for description, one for image, and one for URL. Each tag has a property and a content value. You repeat the pattern on each page, with values that match that page.

For a site with many pages, use a template. The template can fill in the title, description, image, and URL from the page data automatically. Then check a few pages by hand to make sure the template is working. Do not copy the same title, description, and image to every page, because then every preview will look the same.

Worked Example: A Chocolate Cake Page

Imagine you run a small recipe site. You publish a page called Simple Chocolate Cake Recipe. The page has a clear recipe, a photo of the finished cake, and a short introduction. Without Open Graph tags, a shared link might show your site logo and a fragment of navigation text. With good tags, it shows the cake.

Here is what the Open Graph values could be for that page.

og:title: Simple Chocolate Cake Recipe
og:description: A moist chocolate cake you can make in one bowl, with simple ingredients and clear steps for beginners.
og:image: A photo of the finished chocolate cake, well lit, with the cake as the main subject.
og:url: The full address of the recipe page.
og:type: article
og:site_name: The name of your recipe site.

Now imagine someone shares the link in a messaging app. The preview shows the title, the one-sentence description, and the cake photo. A reader can tell at a glance what the page is about. That is the whole point of Open Graph: a clear, honest preview that matches the page.

Contrast that with a bad version. The title is the same as every other page on the site. The description is a long paragraph that gets cut off mid-sentence. The image is a tiny logo. The preview looks generic, and fewer people click. The recipe has not changed, but the preview has made it look less appealing.

Image Size: The Detail Most People Miss

Open Graph images need to be large enough and the right shape. A common recommended size is 1200 by 630 pixels, a ratio of about 1.91 to 1. That size works well on many platforms. Some platforms crop or resize the image, so keep important text and faces away from the edges.

A very small image, such as a 200 by 200 logo, will look tiny or blurry in a large preview. A very tall image may be cropped in unexpected ways. A huge image file may load slowly or be rejected. Aim for a clear image at 1200 by 630 pixels, saved at reasonable quality, with a file size that loads quickly.

Also use an absolute URL for the image, meaning the full address starting with https, not a relative path. Platforms fetch the image from that URL. If the URL is wrong, blocked, or points to a file that no longer exists, the preview will show no image or a broken image icon.

If you change the image, remember that platforms cache previews. Changing the image file on your site does not always change the preview immediately. You may need to use a debugger tool to clear the cache, as described below.

How to Test With Debuggers

Testing is essential because you cannot see Open Graph tags by looking at the visible page. Use a debugger or validator tool to check what a platform sees.

Test with a sharing debugger. Facebook offers a Sharing Debugger. LinkedIn has a Post Inspector. X has a Card Validator. Paste the page URL into the tool and run the check.
Read the results. The tool will show the title, description, image, and URL it found, plus warnings or errors. Look for missing tags, an image that is too small, or a URL that redirects.
Fix the problems on your site. Add missing tags, correct the image URL, or replace a small image with a larger one. Save the changes.
Clear the cache and test again. Many debuggers have a button to scrape the page again or clear the cached preview. Use it, then test again. If the preview still looks old, wait a short time and test once more.
Test in a real app. Send the link to yourself in a messaging app, or preview it in a private post. Check the title, description, and image on both desktop and mobile if you can.

If you do not have access to a debugger, you can still check the page source in your browser. Open the page, view the source, and search for og:. You should see the tags in the head section. This does not show you how a platform will render the preview, but it confirms that the tags exist.

Common Problems and Fixes

If no image appears, check that og:image is present, that the URL is absolute and correct, and that the image file exists. If the wrong image appears, check whether the tag points to that image, or whether the platform is using a cached preview. Clear the cache with a debugger and test again.

If the title or description looks old, the platform may be showing a cached version. Update the tags, use the debugger to refresh the preview, and wait a little time. If the description is cut off, shorten it to one or two clear sentences.

If the preview looks fine on one platform but broken on another, check whether that platform uses Open Graph or its own tags. For example, X also reads Twitter Card tags. Make sure both sets are present and consistent.

If the image looks cropped, adjust the image to 1200 by 630 pixels and keep key content away from the edges. If the image loads slowly, reduce the file size without making it tiny.

Limitations

Open Graph does not control how a platform displays a preview. It provides a suggestion. Platforms can crop images, truncate descriptions, or change layouts. The same page can look slightly different on Facebook, LinkedIn, Slack, and WhatsApp.

Open Graph also does not make people click. A clear preview helps, but the title and description still need to be honest and useful. Misleading previews may get clicks once, but they damage trust.

Finally, Open Graph does not fix a slow page, a broken page, or a page blocked by login or robots rules. If a platform cannot fetch the page, it cannot build a preview. Make sure the page is public, loads correctly, and is not blocked by a firewall or a login wall.

Frequently Asked Questions

What is Open Graph in simple terms?

Open Graph is a set of tags in a page that tells social platforms and messaging apps what title, description, and image to show when someone shares a link. Without it, platforms guess, and the preview often looks wrong.

Which Open Graph tags do I need at minimum?

Start with og:title, og:description, og:image, and og:url. Add og:type and og:site_name when you can. Use a clear image at 1200 by 630 pixels for a good preview.

Why is my link preview showing the wrong image?

The og:image tag may point to the wrong file, or the platform may be showing a cached preview. Check the tag, fix the image URL, and use a sharing debugger to clear the cache and test again.

How do I test Open Graph tags?

Use a sharing debugger, such as the Facebook Sharing Debugger or LinkedIn Post Inspector. Paste the URL, check the title, description, and image, fix any errors, clear the cache, and test again. Then test the link in a real app.

Conclusion

Open Graph is a small addition that makes a big difference. Set a clear title, a short honest description, a correctly sized image, and the canonical URL for each page. Test with a debugger, clear the cache after changes, and check the result in a real app. Your links will look complete, and readers will know what they are opening before they click.