Social cards: Open Graph tags and the share image

What a link preview is

When someone shares a link in a social network or a messenger, the platform reads the page and builds a small card: an image, a title, a short text and the domain. Most platforms read the tags of the Open Graph protocol for this, which are meta elements in the head of the page. X, formerly Twitter, also reads its own tags that begin with twitter:. Each platform designs its card itself and decides how much text it shows. You decide what the page tells the platforms.

The basic tags

The Open Graph protocol, published at ogp.me, names four properties that every page should have: og:title, og:type, og:image and og:url. og:url is the canonical address of the page. Optional, but useful, are og:description, og:site_name and og:locale, the language and region of the tags, for example de_DE.

<meta property="og:title" content="Summer sale: all mugs reduced">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Six blue mugs on a wooden table">
<meta property="og:description" content="Until 31 August: lower prices on mugs and plates.">
<meta property="og:site_name" content="Example Shop">
<meta name="twitter:card" content="summary_large_image">

Write every address in full, with https://. The protocol defines an address as a URL that uses http:// or https://, so a path such as /img/sale.jpg is not a valid value. og:url should match the canonical link of the page. If a tag appears twice with different values, the protocol gives preference to the first one.

The share image

Most previews show the image wide. An image in a ratio of about 1.91 : 1, for example 1200 × 630 pixels, is commonly recommended and fits most cards without cropping. Square images are often cropped at the top and bottom, so keep important content in the middle. For Google Discover, Google recommends images that are at least 1200 pixels wide, a large preview allowed with the setting max-image-preview:large, and an image set with og:image or schema.org markup. Google also advises against generic images such as the site logo.

og:image:width and og:image:height state the size of the image in pixels. og:image:alt describes what is in the image, not a caption. The protocol says that a page with og:image should also specify og:image:alt.

Title and description

og:title can differ from the title element. It does not need the name of the website, because og:site_name carries it. Platforms cut long texts at their own length, so put the important words first. Open Graph tags also matter beyond social networks. Google names the content of og:title as one of the sources for title links in search results, considers og:site_name for the site name, and lists og:image as one way to specify a preferred image.

Tags for X

The tag twitter:card chooses the type of card. The value summary_large_image asks for a large, wide image, summary for a small one. If your page already has Open Graph tags, adding twitter:card is often enough. The developer pages of X could not be read for this guide, so check the current rules there before you rely on a detail.

One card per page

Many websites set the same title and image for every page, often through the theme. Then every shared link looks the same. Give each important page its own og:title, og:description and og:image: a product page the product photo, an article its main image. For og:type, the protocol uses website for a general page and article for an article, among other types. A shop or content system can fill these tags automatically from the title, the summary and the main image of each page. After a change, check one page of each template.

Why the preview does not change

Many platforms store a card once they have built it. If you change the image or the title later, people may still see the old card for a while. A new file name for a new image helps, because the platform then sees a new address. Some platforms offer a tool that fetches the page again.

Before you share a page

• Are og:title, og:type, og:image and og:url present, and is og:url the canonical address?
• Is every address complete, with https://?
• Is the image wide enough, does it load, and is the important content in the middle?
• Are og:image:alt, og:image:width and og:image:height set?
• Is there a twitter:card tag, and is the title short enough?

Work with Do4U

The Social card check shows how a page looks when its link is shared, and checks the tags behind the preview. You enter one address. Do4U reads the page and the start of its share image. The code collects the Open Graph tags, the Twitter/X card tags and the fallbacks, that is the title, the meta description and the first image, as well as the canonical link and the language. It reads the real format and size of the image from the file and compares them with the tags. You get a neutral preview, a table of all tags, findings with a short reason and suggested tags to copy. Tags that a page sets only with JavaScript are not seen. No AI is used, and the check is free, with a daily limit.

Do4U finds hints, you check and decide. The preview is a neutral sketch: how a platform shows the link is decided by the platform.