How to Write Open Graph Tags That Make Links Look Good

October 17, 2026 • NOFYI Editorial Team

When you paste a link into a message, a social post, or a chat app, it often turns into a preview with a title, a short description, and an image. That preview does not come from luck. It comes from Open Graph tags, which are small pieces of information in the code of the page. If those tags are clear and correct, the link looks polished. If they are missing, wrong, or out of date, the link can look broken, show the wrong image, or show no preview at all.

This guide explains what Open Graph tags are, the four main tags you need, how to write each one well, and how to test the result with debuggers. It includes a worked example for a simple page, advice on using absolute URLs, and a checklist for fixing common problems. You do not need to be an expert developer to follow it, but you will need a way to edit your page settings or its code, either through a plugin or by editing the page directly.

Open Graph is a shared standard, not a single platform feature. Many platforms read Open Graph tags, including Facebook, LinkedIn, messaging apps, and others. X also uses its own Twitter Card tags, but it can fall back to Open Graph tags for some values. That is why setting Open Graph tags well helps your links in many places, not just one.

What Are Open Graph Tags?

Open Graph tags are meta tags that live in the head section of a web page. The head section is the part of the page code that visitors do not see, but browsers, search engines, and social platforms read it. Each Open Graph tag has a property name that starts with og, and a content value that gives the information for that property. For example, og:title gives the title, og:description gives the description, og:image gives the image, and og:url gives the page address.

When someone shares your link, the platform fetches the page, reads these tags, and uses them to build the preview. If the tags are missing, the platform has to guess. It may pick the first image on the page, which might be a logo or a small icon. It may pick the first paragraph of text, which might be a navigation menu or a cookie notice. It may show a long, messy URL instead of a title. Those guesses are why so many shared links look wrong.

Open Graph tags do not change how the page looks to a visitor who opens it directly. They change how the page is presented when it is shared. Think of them as the packaging for your link. The page itself is the product. The Open Graph tags are the label that tells other platforms what the product is, what it is about, and which picture to show.

The Four Main Open Graph Tags

You can add many Open Graph tags, but four do most of the work. Start with these and get them right before you add extras.

og:title

og:title is the title shown in the link preview. It should be clear, accurate, and close to the title of the page. It does not need to be identical to the page title, but it should not promise something the page does not deliver. Keep it short enough to read at a glance. Avoid all caps, avoid a long list of keywords, and avoid a title that only makes sense with the rest of the page around it. A reader should understand what the page is about from the title alone.

og:description

og:description is a short summary of the page, usually one or two sentences. It should explain what the reader will find and why it matters. Avoid repeating the title word for word, because the preview already shows the title. Avoid vague phrases such as welcome to our website, because they do not help a reader decide whether to click. Write for a person who has never seen your site and who is deciding in a second whether the link is worth opening.

og:image

og:image is the image shown in the preview. It should be relevant, clear, and correctly sized. Use a landscape image, because most previews are wider than they are tall. A widely used size for social preview images is 1200 by 630 pixels, which fits the wide shape of many previews. Keep the main subject in the center, avoid small text that will be hard to read, and avoid a busy image that turns into noise at preview size. Use a JPG or PNG file that is publicly accessible.

og:url

og:url is the canonical address of the page, which means the main address you want people to use for that page. It should be the full address, starting with https, and it should match the page you are tagging. If the same page can be reached by several addresses, for example with and without www, or with tracking parameters, og:url tells platforms which address is the main one. That helps avoid duplicate previews for the same page.

There are other useful tags, such as og:type, which describes the kind of content, and og:site_name, which gives the name of the site. These are helpful, but they are secondary. If you get the four main tags right, your previews will already be much better than a page with no tags at all.

How to Write Each Tag Well

Good Open Graph tags follow a few simple rules. First, match the page. The title, description, and image should all describe the same page. Do not reuse the home page tags on every page, because then every shared link will show the same preview, even when the pages are different. Each page deserves its own tags.

Second, keep the text short and specific. A title that is too long may be cut off. A description that is too long may be cut off too. Aim for a title that fits on one line in a preview, and a description of one or two sentences. Read the preview as if you were a stranger. If you cannot tell what the page is about, rewrite the tags.

Third, use absolute URLs. An absolute URL is the full address, such as https://example.com/images/preview.jpg, not a relative path such as /images/preview.jpg. Platforms that fetch your page from outside your site need the full address to find the image and the page. Relative paths may work inside your own site, but they often fail when another platform tries to use them. Always use absolute URLs for og:image and og:url.

Fourth, check the image. Open the image URL in a browser and confirm that it loads without a login. Check that the image is not too small, not stretched, and not cropped in a way that cuts off the subject. If the image shows text, make sure the text is large enough to read in a preview. If you change the image, update the tag and test again, because platforms may cache the old image.

Fifth, keep the tags consistent. Do not add the same tag twice with different values. Do not mix a Twitter Card title that says one thing with an Open Graph title that says something else, unless you have a clear reason. Consistency reduces confusion for platforms and for readers.

How to Add Open Graph Tags

How you add the tags depends on how your site is built. The easiest method for most site owners is to use a plugin. In WordPress, for example, SEO plugins such as Rank Math or Yoast let you set the social preview for each page. You open the page, find the social or SEO settings, enter the title, description, and image, and save. The plugin generates the tags for you. This method is less error-prone than writing code by hand, because the plugin handles the format.

If you add tags by hand, add them to the head section of the page. Keep the Open Graph tags together so they are easy to find and update later. Use the correct property names, starting with og, and use absolute URLs for the image and page address. Save the page and check that the tags are present by viewing the page source in your browser. If you are not comfortable editing theme files or page code, use the plugin method instead. Editing theme files is not required for most sites, and a mistake there can affect the whole site.

After you add the tags, do not assume they work. Test them with a debugger, which is covered below. A debugger will fetch the page, show you the preview, and list any errors. Testing is part of the work, not an optional extra.

Worked Example: A Simple Page With Clear Tags

Imagine you have a page on a small site. The page is called How to Brew Better Coffee at Home. It has a short guide, a list of steps, and a photo of a coffee cup on a table. You want the link to look good when it is shared. Here is how you would write the tags.

First, decide the title. The page title is How to Brew Better Coffee at Home. You use that as the og:title, because it is clear and accurate. You do not add extra keywords or a long site name, because the preview will show the site name separately if it is set.

Second, write the description. You write: A simple guide to brewing better coffee at home, with clear steps, common mistakes to avoid, and tips for a cleaner cup. That description is one sentence, it tells the reader what to expect, and it does not repeat the title word for word.

Third, choose the image. You use the photo of the coffee cup. You crop it to 1200 by 630 pixels, keep the cup in the center, and save it as a JPG. You upload it to your site and copy the full URL, for example https://example.com/images/coffee-cup-1200×630.jpg. You open that URL in a browser to confirm that it loads.

Fourth, set the URL. The page address is https://example.com/how-to-brew-better-coffee-at-home/. You use that full address as the og:url. You do not use a relative path, and you do not add tracking parameters.

Fifth, add the tags. Using a plugin or by hand, you set og:title, og:description, og:image, and og:url to the values above. You save the page. You then test the page with a debugger. The preview shows the coffee photo above the title and description. The title is not cut off, the description reads clearly, and the image is not stretched. You now know what readers will see when they share the link.

If the preview had shown the wrong image, you would check the og:image URL, confirm that the image is public, and check that no other tag is overriding it. If the preview had shown no image, you would check that the URL is absolute, that the image is the right size, and that the file is not blocked. This example follows a pattern you can reuse for any page: choose clear text, choose a good image, use absolute URLs, add the tags, and test.

How to Test With Debuggers

Debuggers are tools that fetch a page and show how its Open Graph tags will be used. The most widely known debugger is the Sharing Debugger provided by Meta for Facebook, which shows how a link will appear on Facebook. LinkedIn also has a Post Inspector tool that shows how a link will appear on LinkedIn. Other platforms have their own tools, and the general idea is the same: paste the page URL, run the check, and read the preview and any warnings.

To test, open the debugger, paste the full URL of the page, and run the check. The tool will fetch the page and show a preview. Check the title, description, and image. Check that the image is not missing, stretched, or cropped in a way that cuts off the subject. Read any warnings. Common warnings include a missing og:image, an image that is too small, a missing og:title, or a URL that redirects to another page.

After you fix a problem, run the debugger again. Many debuggers have a scrape again or fetch new information option that prompts the platform to fetch the page fresh. Use that option after you update the tags. Do not assume the fix worked. The debugger is the fastest way to confirm that the platform can read the updated tags.

Test on more than one platform if your readers share links in more than one place. A preview that looks good on one platform may look different on another, because each platform crops images and truncates text in its own way. Checking two debuggers takes a few minutes and can prevent a broken preview from being shared widely.

Common Problems and How to Fix Them

One common problem is a missing image. The preview shows no image, or shows a generic icon. The usual causes are a missing og:image tag, a relative image URL, an image that requires a login, or an image that is too small. Fix the tag, use an absolute URL, confirm the image is public, and test again.

Another common problem is the wrong image. The preview shows a logo, an old photo, or an image from another page. The usual causes are a default image set in a plugin, an og:image tag that points to the wrong file, or a cached old image. Check the tag, check the plugin settings for a default image, and use the debugger to fetch fresh information.

Another common problem is the wrong title or description. The preview shows the site name instead of the page title, or shows a paragraph from the footer instead of a summary. The usual causes are missing og:title or og:description tags, or tags that are duplicated with different values. Add the correct tags, remove duplicates, and test again.

Caching is another common issue. Platforms may cache, or save, the preview for a page after they first read it. If you update the tags, the old preview may keep showing for a while. Use the debugger to fetch fresh information, clear your site cache if you use a caching plugin, and allow time for the platform cache to update. Test before you share widely to reduce this problem.

Finally, check for redirects. If the page URL redirects to another address, the platform may read the tags from the final address, not the address you shared. Make sure og:url matches the final address, and test the exact URL you plan to share.

Limitations

Open Graph tags have limits. They control the preview, not the content of the page. A good preview will not make a weak page useful, and a good page can still be ignored if the preview does not explain why it matters. The preview is a summary, not a substitute for the page.

Different platforms may use the tags differently. One platform may show a large image, another may show a small image, and another may show no image at all. An image that looks perfect in one debugger may look different in another. Always test on the platforms your readers actually use, and accept that small differences are normal.

Debuggers can only check pages they can reach. If the page requires a login, is blocked by a firewall, or is on a local test server, the debugger will not be able to fetch it. Test on a public page that anyone can open. If your site is still in development, wait until it is public before you test the tags.

Finally, platforms may change their tools, formats, or requirements over time. A debugger may move or change its name, and recommended image sizes may be updated. If a step in this guide does not match what you see, check the current documentation for the platform and for your plugin. The core idea stays the same: give platforms clear tags, a good image, and a tested preview.

Frequently Asked Questions

What are Open Graph tags?

Open Graph tags are meta tags in the head section of a page that tell platforms how to build a link preview. The main tags are og:title, og:description, og:image, and og:url. They help your links show a clear title, summary, and image when shared.

Why does my link show the wrong image?

The usual causes are a missing or incorrect og:image tag, a relative image URL, a default image set in a plugin, or a cached old image. Check the tag, use an absolute URL, check the plugin settings, and use a debugger to fetch fresh information.

Should I use absolute URLs in Open Graph tags?

Yes. Use full addresses starting with https for og:image and og:url. Relative paths such as /images/preview.jpg may work inside your own site, but they often fail when another platform tries to fetch the image or page from outside your site.

How do I test Open Graph tags?

Use a debugger, such as the Sharing Debugger for Facebook or the Post Inspector for LinkedIn. Paste the full page URL, run the check, and read the preview and any warnings. After you fix a problem, run the debugger again to fetch fresh information.

Conclusion

Open Graph tags are a small amount of code with a clear job: help your links look good when they are shared. Write a clear og:title, a short og:description, a relevant og:image, and a correct og:url. Use absolute URLs, test with debuggers, and fix caching issues before you share widely. With that routine, your links will present themselves clearly instead of appearing as bare URLs or broken previews.