Open Graph Tags: How to Control Link Previews Everywhere

Short answer: Open Graph tags are meta tags in a page’s head that tell social networks, messengers and many other apps what title, description and image to show when someone shares the link. Every page should have og:title, og:description, og:image and og:url, with a share image of about 1200 × 630 pixels referenced by an absolute HTTPS URL. They do not affect Google rankings directly, but they strongly influence clicks from shared links.

What Open Graph is

The Open Graph protocol was introduced by Facebook and is now read by most platforms that show link previews: social networks, business chat tools, messaging apps and many content aggregators. When a link is pasted, the platform fetches the page, reads the Open Graph tags and builds a preview card. The specification is published at ogp.me.

Without Open Graph tags, platforms guess. They may use the HTML title, the first paragraph and a random image from the page, often the logo, an icon or a tracking pixel. The result is a poor preview that fewer people click.

Links travel far beyond social networks. They are pasted into team chats, e-mails, community forums, customer support replies and messaging apps, and almost all of these show a preview. For a small business, a well-formed preview on a link a customer forwards to a colleague can matter as much as a social post. That makes Open Graph one of the most widely used pieces of page metadata, even though it rarely gets as much attention as titles and descriptions for search. Setting it up correctly once, in the templates, means every new page gets a good preview automatically.

The tags every page needs

<meta property="og:title" content="How to Fix a Slow LCP">
<meta property="og:description" content="Find the LCP element, split the time and fix the slowest part.">
<meta property="og:image" content="https://www.example.com/images/lcp-guide-share.png">
<meta property="og:url" content="https://www.example.com/fix-lcp/">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example">

Some platforms also read their own tags, for example twitter:card with the value summary_large_image to request a large image card. When platform-specific tags are missing, most fall back to Open Graph.

Share images that work

The image does most of the work in a preview. Practical guidelines:

• Size: about 1200 × 630 pixels (a 1.91:1 ratio) works well across major platforms. Larger images with the same ratio are fine; very small images may be shown as a thumbnail instead of a large card.
• Absolute URL: include protocol and host. Relative paths are often not resolved.
• HTTPS and publicly accessible: not behind a login, not blocked by robots.txt or hotlink protection.
• Safe area: keep text and important elements away from the edges; some apps crop to a square or a different ratio.
• File size: keep it reasonable; very large files may be skipped by some fetchers.
• Specific to the page: a unique image per article or product performs better than the same logo everywhere.

Optional tags og:image:width, og:image:height and og:image:alt help some platforms render the image immediately and describe it for accessibility.

Does Open Graph affect SEO?

Google does not use Open Graph tags as a ranking signal, and its search results use their own title and snippet logic. But Open Graph matters for search-related outcomes in indirect ways:

• better previews get more clicks when content is shared, which brings visitors, attention and sometimes links;
• consistent titles, descriptions and images reinforce your brand across platforms;
• some apps and AI tools read Open Graph data as a quick summary of the page.

It is best treated as part of a page’s technical metadata, next to the title, meta description, canonical and structured data.

Setting it up on WordPress and other platforms

• WordPress: most SEO plugins output Open Graph tags automatically from the post title, description and featured image, with fields to override them per post. Make sure only one plugin outputs them; duplicate tags from a theme or a second plugin confuse platforms.
• Shops: product pages should use the main product image, product name and a short description. Some shop plugins output their own Open Graph tags; check for duplicates.
• Custom sites: generate the tags in the page template from the same data as the title and canonical, and set a default share image for pages without their own.

Why previews show the wrong content

• Old title or image after an update: the platform cached the previous preview. Use its debug or refresh tool.
• No image at all: a relative URL, an image blocked by hotlink protection or robots.txt, or an image that is too small. Use an absolute HTTPS URL to an accessible image of the right size.
• Logo or icon instead of the content image: og:image is missing and the platform guessed. Set a page-specific image.
• Wrong page title: duplicate tags from the theme and a plugin. Keep one source.
• Preview of a login, consent or error page: the preview fetcher was blocked or challenged by a firewall or bot protection. Allow known link preview bots.

Platforms cache previews, sometimes for a long time. After fixing tags, use the platform’s sharing debugger to refresh the cached version. Messaging apps may only update when the link is shared again later.

Writing preview text that gets clicked

The technical setup gets a preview to appear; the words decide whether anyone clicks it. A few habits help:

• Lead with the benefit or the answer. “How to fix a slow LCP in four steps” is clearer in a crowded feed than a clever but vague headline.
• Keep titles short. Many apps truncate long titles, often after around 60 to 70 characters, and some show only one line on mobile.
• Write the description as a promise of what the reader will get, not a repeat of the title.
• Match the page. A preview that overpromises leads to quick exits and less trust in future shares.
• Design the image for small screens. Large text, strong contrast and one clear idea work better than detailed graphics that become unreadable as a thumbnail.

Open Graph for different page types

Different templates need slightly different treatment:

• Home page: brand name, a clear one-line description of what you offer and a branded share image. Use og:type website.
• Articles: the article headline, a short summary and the featured image designed for sharing. og:type article, optionally with publication time tags.
• Products: product name, a benefit-focused description and the main product photo on a clean background.
• Category and landing pages: often forgotten, yet frequently shared in ads and messages. Give them their own image rather than the default logo.
• Legal and utility pages: the site defaults are usually enough.

A sensible default image for pages without their own prevents the worst case, where platforms pick a random icon.

How to check Open Graph tags

1. View the page source and search for og:. Confirm each tag appears once with the right values.
2. Open the og:image URL directly in a private browser window to confirm it loads.
3. Test the URL in the sharing or post inspector tools that major platforms provide.
4. Check a few templates: home, article, product, category and contact pages.
5. Crawl the site to find pages with missing, duplicated or broken Open Graph tags at scale.

How Site SEO AI Audit checks Open Graph

The structured data area of the audit checks Open Graph tags and share images on every page, next to Schema.org markup and invalid JSON-LD. Pages with missing tags or missing share images are listed and weighted by how many pages they affect, so a template that outputs no Open Graph data stands out immediately. WordPress sites get the steps to fix it in the SEO plugin. You can run a free audit.

Related reading

• Structured data errors: how to find and fix invalid schema
• How to write meta descriptions that earn the click
• How to write title tags: length, wording and examples

The bottom line

Open Graph tags decide what people see when your links are shared. Give every page a clear og:title, og:description, og:url and a page-specific share image of about 1200 × 630 pixels on an absolute HTTPS URL, output them from one source only, and refresh cached previews after changes.

الأسئلة الشائعة

Are Open Graph tags a ranking factor?

No. Google does not use them to rank pages. They control how links look when shared on social networks and in messaging apps, which affects clicks from those places.

What size should an Open Graph image be?

About 1200 × 630 pixels, a 1.91:1 ratio, works well across major platforms. Keep important content away from the edges because some apps crop the image.

Why does my link preview show an old image?

Platforms cache previews. After updating the tags, use the platform’s sharing debugger or post inspector to fetch the page again and refresh the preview.

Do I need Twitter card tags as well?

Most platforms fall back to Open Graph, but adding twitter:card with summary_large_image ensures a large image card on X. Many SEO plugins output both automatically.

Can og:title differ from the page title?

Yes. The page title is written for search results, while og:title can be phrased for social sharing. Keep both accurate to the page content.