Open Graph and Twitter Cards: social sharing for the AI era
Why Open Graph and Twitter Cards matter for AI
When you share a link on LinkedIn, Facebook, Slack or WhatsApp, a visual preview automatically appears with a title, description and image. This preview is not randomly generated. It is determined by Open Graph meta tags and Twitter Card tags that you place in the HTML head of your page. Without these tags, platforms guess at random text and images from your page, often with disappointing results.
What many website owners do not realize is that AI models also use these meta tags. When a language model analyzes your page, the Open Graph tags serve as a compact, structured summary of what the page contains. The og:title, og:description and og:type tell an AI model in a fraction of a second what the page is about. This makes these tags an important part of your AEO strategy.
Open Graph tags are not just for social media. AI models like ChatGPT, Perplexity and Claude use these meta tags as quick signals to classify the content and type of a page.
The essential Open Graph tags
The Open Graph protocol was originally developed by Facebook and is now widely supported by virtually all platforms. The four required tags form the minimum you should implement on every page.
<head>
<!-- Required Open Graph tags -->
<meta property="og:title" content="Open Graph and Twitter Cards: social sharing for the AI era" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://aeo-expert.nl/blog/open-graph-twitter-cards" />
<meta property="og:image" content="https://aeo-expert.nl/images/og-open-graph-guide.jpg" />
<!-- Strongly recommended additional tags -->
<meta property="og:description" content="Learn how Open Graph and Twitter Cards improve your AI visibility." />
<meta property="og:site_name" content="AEO Expert" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="nl_NL" />
<!-- Article-specific tags -->
<meta property="article:published_time" content="2026-04-22T10:00:00+02:00" />
<meta property="article:modified_time" content="2026-04-22T10:00:00+02:00" />
<meta property="article:author" content="https://aeo-expert.nl/team/reinier" />
<meta property="article:section" content="Technical SEO" />
<meta property="article:tag" content="Open Graph" />
<meta property="article:tag" content="meta tags" />
</head>The og:title should contain your page title, but may differ from the HTML title tag if you want a different wording for social media. Keep the title under 60 characters so it does not get truncated. The og:description is your chance to provide a compelling summary that motivates people to click through. Limit it to 155 characters.
Setting up images correctly
The og:image tag is arguably the most important tag for engagement. An attractive image significantly increases the chance that people click your link. Facebook and LinkedIn recommend an image of at least 1200 by 630 pixels. Make sure the image conveys a clear message, even at small sizes.
- Use an image of at least 1200 by 630 pixels for optimal display across all platforms.
- Add og:image:width and og:image:height tags so platforms can load the image correctly right away.
- Use og:image:alt for an image description, this improves accessibility and gives AI extra context.
- Avoid text in images that covers more than 20% of the surface, some platforms limit reach in that case.
- Serve images over HTTPS to avoid mixed-content warnings.
Remember that the og:image:alt tag deserves the same care as the alt texts on your regular images. A descriptive alt text on your OG image helps AI models classify the visual content, even when they cannot analyze the image itself.
Dive deeper: Alt texts for images | Canonical URLs and duplicate prevention | Schema.org markup for AI
Implementing Twitter Cards
Twitter (now X) uses its own set of meta tags that operates alongside Open Graph. When both are present, Twitter prefers its own tags. It is therefore wise to implement both sets.
<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@kobaltdigital" />
<meta name="twitter:creator" content="@reinier" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: social sharing for the AI era" />
<meta name="twitter:description" content="Learn how Open Graph and Twitter Cards improve your AI visibility." />
<meta name="twitter:image" content="https://aeo-expert.nl/images/og-open-graph-guide.jpg" />
<meta name="twitter:image:alt" content="Illustration of Open Graph meta tags and their effect on social previews" />There are four types of Twitter Cards: summary, summary_large_image, app and player. For blog posts and articles, summary_large_image is almost always the best choice. This type shows a large image above the title and description, providing maximum visual impact in the timeline.
Difference between Open Graph and Twitter Cards
- Open Graph uses property attributes (property="og:title"); Twitter Cards use name attributes (name="twitter:title").
- Twitter falls back to Open Graph tags when its own tags are missing, but not the other way around.
- Open Graph supports locale information (og:locale); Twitter Cards do not have this.
- Twitter Cards have a required twitter:card type that determines the format of the preview.
Open Graph and canonical URLs: prevent conflicts
A common mistake is having the og:url not match the canonical URL of your page. When your og:url points to a different URL than your canonical tag, this creates confusion for both social media platforms and AI crawlers. The og:url and the canonical URL should always point to the same preferred URL.
<head>
<!-- These two must ALWAYS match -->
<link rel="canonical" href="https://aeo-expert.nl/blog/open-graph-guide" />
<meta property="og:url" content="https://aeo-expert.nl/blog/open-graph-guide" />
<!-- WRONG: canonical and og:url point to different URLs -->
<link rel="canonical" href="https://aeo-expert.nl/blog/open-graph-guide" />
<meta property="og:url" content="https://www.aeo-expert.nl/blog/open-graph-guide/" />
</head>Open Graph combined with Schema.org
Open Graph tags and Schema.org markup complement each other, but serve different purposes. Open Graph is designed for social media previews; Schema.org provides deeper, structured metadata for search engines and AI models. Ideally you implement both and ensure the information is consistent.
<head>
<!-- Open Graph for social sharing -->
<meta property="og:title" content="Open Graph Guide" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-22T10:00:00+02:00" />
<!-- Schema.org JSON-LD for AI and search engines -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Open Graph Guide",
"datePublished": "2026-04-22T10:00:00+02:00",
"author": {
"@type": "Person",
"name": "Reinier Korthals Altes"
}
}
</script>
</head>Notice that the publication date is identical in both blocks. Inconsistent dates between Open Graph and Schema.org can confuse AI models and lower your trustworthiness score.
A complete meta tag template
In practice, you combine Open Graph, Twitter Cards and standard HTML meta tags into a complete set. Here is a template you can use as a starting point for every page on your website.
<head>
<title>Page Title | AEO Expert</title>
<meta name="description" content="Short description for search engines." />
<!-- Open Graph -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description for social sharing." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://aeo-expert.nl/blog/example" />
<meta property="og:image" content="https://aeo-expert.nl/images/og-example.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
<meta property="og:site_name" content="AEO Expert" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Description for Twitter." />
<meta name="twitter:image" content="https://aeo-expert.nl/images/og-example.jpg" />
<meta name="twitter:image:alt" content="Description of the image" />
</head>Open Graph tags and SameAs: strengthen your digital identity
Open Graph tags work best when combined with other identity signals on your website. By including sameAs links in your Schema.org markup, you confirm the relationship between your website and your social media profiles. When AI models then encounter your Open Graph tags while analyzing shared links, they can verify this connection.
Common mistakes and how to avoid them
- Not providing an og:image. This is the most common mistake. Without an image, your shared link looks bare and unappealing.
- Using the same og:title and og:description on all pages. Every piece of content deserves unique meta tags that describe the specific content.
- Images that are too small. Use at least 1200 by 630 pixels, otherwise they will not be displayed or will look blurry.
- Missing og:url causing the same page to be counted as multiple unique URLs by social media platforms.
- Not clearing outdated cache. After changing meta tags, you need to manually clear the cache of Facebook (Sharing Debugger) and Twitter (Card Validator).
- Not providing og:image:alt. AI models and screen readers miss context about the image.
- Only placing Open Graph tags on the homepage and forgetting blog and product pages.
Testing and validating Open Graph
After implementing your meta tags, it is essential to verify that they are being read correctly by all platforms. Each platform has its own debugging tool.
- Facebook Sharing Debugger (developers.facebook.com/tools/debug): shows how Facebook sees your page and lets you refresh the cache.
- Twitter Card Validator (cards-dev.twitter.com/validator): validates your Twitter Card tags and shows a preview.
- LinkedIn Post Inspector (linkedin.com/post-inspector): checks how your link appears on LinkedIn.
- Open Graph preview tools like opengraph.xyz: show a combined overview of all OG tags.
Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and the Twitter Card Validator to verify that your meta tags are being read correctly. Test every important page after publication.
Key takeaways
- Open Graph tags are not just for social media: AI models use them as quick classification signals for your content.
- Always implement both Open Graph and Twitter Card tags for maximum coverage across all platforms.
- Ensure og:url and canonical URL are identical to prevent conflicting signals.
- Combine Open Graph with Schema.org markup and ensure consistent information across both sources.
- Test your implementation with platform-specific debugging tools after every change.
Frequently asked questions
Should I implement both Open Graph and Twitter Card tags?
Yes, that is the recommended approach. Although Twitter falls back to Open Graph tags when its own tags are missing, this does not work the other way around. Additionally, Twitter Cards offer specific features like the card type that are not available via Open Graph. By implementing both, you have maximum control over how your content appears on each platform.
How long can an og:description be?
Technically there is no hard limit, but in practice most platforms truncate around 155 to 200 characters. Keep your description under 155 characters to ensure the full text is visible on all platforms. Always put the most important information first.
Do AI models use Open Graph tags when generating answers?
AI models like ChatGPT, Perplexity and Claude use Open Graph tags as one of the signals to quickly classify the topic and type of a page. The og:title and og:description provide a concise summary that helps the model evaluate the relevance of your content before it analyzes the full text.
What happens if my og:image is missing or too small?
Without an og:image, social media platforms either show no image or pick a random image from your page, often with disappointing results. An image smaller than 200 by 200 pixels will not be displayed by Facebook. LinkedIn and Twitter have similar minimum dimensions. Always use at least 1200 by 630 pixels.
How often should I update my Open Graph tags?
Update your Open Graph tags whenever the content of your page changes significantly: a new title, updated description, or a refreshed header image. After a change, do not forget to refresh the cache via the Facebook Sharing Debugger and LinkedIn Post Inspector, otherwise platforms will continue showing the old version.
You only get one chance to make a good first impression. On social media, that impression is determined by your Open Graph tags.
How does your website score on AI readiness?
Get your AEO score within 30 seconds and discover what you can improve.
