Open Graph tags: control how your links look when shared

When someone pastes a link into a chat, a social post or a messaging app, the app often turns it into a card with a title, a short description and a picture. The card is built from a handful of tags in the page's head, called Open Graph tags. If they are missing, the app guesses, and the result can be a blank box, the wrong picture or a cut-off title. This guide explains what each tag does, shows an example, gives the recommended image size and the arithmetic behind it, covers the mistakes that make a card look wrong, and explains how to test and refresh a preview after you change it.

By Valtrinity. Updated 18 October 2026.

What Open Graph tags are

Open Graph is a simple convention for describing a page to other services. You add a few meta tags to the head of the page, and any service that follows the convention can read them. Social networks, messaging apps, collaboration tools and many other services use them to build link previews.

The tags do not change how the page looks to a visitor. They only provide information for previews. They are also separate from the meta description used by search engines, though the two often say similar things.

Setting them takes a few minutes per page template and has a noticeable effect on how links look when people share your content, which is one of the main ways pages are discovered.

The tags that matter

Four tags do most of the work. og:title is the headline of the card. og:description is a short summary. og:image is the address of the picture. og:url is the canonical address of the page. Two more are often added: og:type, which is usually website or article, and og:site_name, which gives the name of the site.

Here is an example for a guide page: <meta property='og:title' content='How to calculate how much paint you need'>, <meta property='og:description' content='Work out litres and tin sizes for any room with a full worked example.'>, <meta property='og:image' content='https://example.com/images/paint-guide.jpg'>, <meta property='og:url' content='https://example.com/guides/paint/'>, <meta property='og:type' content='article'>.

The image address must be a full address starting with https, not a path from the site root, because the service that fetches it does not know your domain. The title and description can be the same as the page's own, but you can tune them for sharing, for example with a more conversational title.

Choosing and sizing the image

The recommended size for the main share image is 1200 by 630 pixels. That shape has an aspect ratio of about 1.91 to 1, since 1200 divided by 630 is 1.905. Most services crop to something close to that ratio on desktop and show a similar crop on phones.

Keep the important parts, such as text and faces, in the middle, with a margin of around 60 pixels from every edge, because some apps crop the sides or round the corners. Use large text, since the card is often shown at a fraction of the full size. A 1200 pixel wide image shown at 300 pixels is a quarter of its size, so text needs to be big enough to be readable at that scale.

Keep the file size reasonable. Under 1 MB is a good target, and some services refuse images over 5 MB. A JPG or PNG is the safest format. If your picture is the wrong shape, crop it to 1.91 to 1 rather than letting each service decide.

Titles and descriptions for sharing

Keep titles short enough to display in full. Around 60 characters is a sensible limit, though some services show more. Put the key words first, since the end may be cut off.

Descriptions are shown more briefly on some services than others. Write one that makes sense in 100 characters or fewer, and use the rest for detail. Avoid text that repeats the title.

Write for people who see only the card. They should be able to tell what the page is, who it is for and why it is worth opening. Avoid all-capitals and strings of punctuation, which look like spam.

Related tags for other services

Some services read their own tags in addition to Open Graph. A common one is a card type tag, whose value summary_large_image gives a large picture above the title. If the other tags are missing, many services fall back to the Open Graph ones, so adding the card type tag is often all that is needed.

Also set a proper title tag, meta description and canonical link on every page. These help search engines, and they act as a fallback for services that find no Open Graph tags.

For sites with many pages, generate the tags from a template that fills in each page's title, description and image, and falls back to a default image if a page does not have its own.

Common problems and how to fix them

The most common problem is a missing or wrong image. Check that the address works when pasted into a new browser window where you are not logged in, that it starts with https, and that the file is not blocked by a login or a rule that blocks automated visitors. The service that builds the preview has to be able to fetch it.

Another is an old preview that does not update. Services keep a copy of the card for a while. After you change the tags, ask the service to fetch the page again, using its debugging or sharing tool, or add a small change to the image address, such as a version number at the end, to force a new copy.

A third is duplicate or conflicting tags, caused by a theme and a plugin both adding them. View the page source and look for repeated og:title tags. Keep one. Finally, check that the og:url matches the real address of the page, without tracking parameters.

How to test your tags

Open the page source and search for 'og:' to see which tags are present. A tag checker can list them and flag missing ones, and a preview tool can show roughly how the card will look. Test with a few real links on a phone and a desktop, since layouts differ.

Test before launch for new templates, and after any change to a theme or a plugin. A small change to the head can remove tags silently.

Finally, look at the cards through the eyes of a new reader. If the picture is dull, the title is cut off or the description says nothing, the card will be scrolled past. A few minutes spent on the tags for your best pages is time well spent.

Tools mentioned in this guide

Frequently asked questions