Open Graph metadata gives social platforms a clear title, description, image, URL, and type when a page is shared. It does not replace visible content or SEO metadata, but it prevents important pages from relying on unpredictable scraping.
Inspect the production URL with ToolTrace's free Meta Tag Checker after implementing the tags.
Add essential Open Graph properties
Include og:title, og:type, og:image, and og:url. Add og:description and og:site_name for a useful branded preview.
The Open Graph protocol documents the object model.
Write specific social copy
The title should identify the page, not only the brand. Keep descriptions accurate, useful at a glance, and free of unsupported claims or keyword lists.
Social and SEO copy can differ, but both must promise what the visible page delivers.
Open Graph image size and format
Use an absolute HTTPS URL, common format, and composition that survives cropping. A 1.91:1 image such as 1200 by 630 is widely compatible. Add width, height, and descriptive image alt properties.
Compress aggressively without obvious damage. Avoid tiny text and unrelated decorative AI imagery.
Set URL, type, and article details
og:url should normally match the canonical URL without tracking parameters. Use website for general pages and article for editorial content.
Add publication and author information only when accurate and visible.
Add Twitter Card metadata
Use twitter:card, usually summary_large_image, and platform-specific values when needed. Many platforms fall back to Open Graph.
Keep variants synchronized so one URL does not present conflicting claims.
Test, debug, and govern previews
Put tags in the document head and make them available without interaction. Verify raw production HTML, redirects, absolute URLs, image access, and successful status. Use official platform debuggers to refresh caches.
Define CMS requirements and include social metadata in the on-page SEO audit.
A complete Open Graph example
The full set for an article, ready to adapt. Everything sits in <head>, and every URL is absolute.
<meta property="og:title" content="How to Extract Main Article Text from a Webpage">
<meta property="og:description" content="Separate the readable body from page chrome and verify the result.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/extract-article-text/">
<meta property="og:image" content="https://example.com/images/extract-article-text.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Article text separated from navigation and sidebars">
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="en_GB">
<meta name="twitter:card" content="summary_large_image">Two details do the most work. og:url should be the canonical URL, so shares of a tracked or parameterised link still consolidate to one page. And og:image must be absolute: a relative path is the single most common reason a preview shows no image at all.
How LinkedIn reads Open Graph tags
LinkedIn uses the same og: properties as everyone else, with two behaviours that catch people out.
It caches aggressively. Once LinkedIn has fetched a URL it may hold that preview for weeks, so fixing the tags does not fix an existing share. Run the URL through the LinkedIn Post Inspector to force a refresh, then share again.
It fetches as a bot, without JavaScript. Tags injected client-side are invisible to it. If your framework renders meta tags in the browser rather than in the served HTML, LinkedIn sees nothing. Check the raw response rather than the rendered page.
LinkedIn also reads og:image at a minimum of 1200 by 627, close enough to the 1200 by 630 that works everywhere else, so one image covers both.
Adding Open Graph tags in WordPress
WordPress core does not output Open Graph tags, which is why a fresh install shares with no image. Three routes, in order of how most sites do it.
Yoast SEO adds them automatically. Set the defaults under Settings, then Site features, and override per post in the Social tab of the post editor.
Rank Math does the same under Titles & Meta, with per-post overrides in the Social tab of the Rank Math sidebar.
By hand, if you would rather not add a plugin: add the tags to header.php in a child theme, or hook wp_head in your theme functions. Use a child theme, or a theme update will overwrite the work.
Whichever route you take, the failure mode is the same: two plugins both emitting tags. Duplicate og:image properties make the preview unpredictable, so check the rendered head for repeats after enabling anything new.
Compose a reliable social preview
Treat the preview as a compact promise. The title should identify the page, the description should state its useful outcome, and the image should remain legible when cropped on different platforms. Use an absolute canonical URL and an absolute image URL that returns successfully without authentication.
- Prefer a purpose-made 1.91:1 image with safe text margins.
- Keep essential wording out of the extreme edges.
- Specify image width, height, type, and accurate alt text.
- Use article-specific metadata instead of site-wide defaults on every URL.
- Keep Open Graph, X card, canonical, title, and visible page content consistent.
Preview the production URL with the Meta Tag Checker before sharing it.
Debug stale or broken previews
Inspect the rendered production HTML, then request the image directly. Common failures include relative URLs, blocked bots, oversized files, unsupported formats, cached metadata, redirect chains, and client-side tags that a crawler never sees.
Use each platform's official debugger or card validator to request a refresh after correcting the source. Version an image URL when the asset changes materially, but avoid creating endless duplicates. Include social metadata in release checks for high-value pages and monitor whether CMS fallbacks replace page-specific values.
Common failure patterns and how to diagnose them
Start with the earliest failing layer. If a request does not return the expected page, inspect DNS, redirects, HTTP status, content type, firewall behavior, and access controls before changing extraction or metadata rules. If the correct document arrives but the result is empty, compare initial HTML with the rendered page and determine whether JavaScript supplies the missing information.
When only some fields are wrong, inspect the page source and identify which signal produced each value. A stale canonical, duplicated title, malformed JSON-LD block, relative URL, or CMS fallback should be corrected at its source. Avoid adding a special case for one URL when the same template defect affects a wider section of the site.
Finally, distinguish a deterministic failure from a recommendation. Invalid JSON, an unreachable URL, or a conflicting index directive can be proven. Content usefulness, ideal wording, and business priority still require human judgment. A professional report should show the evidence, explain the consequence, and avoid presenting a heuristic as a universal rule.
Production quality checklist
Validate the exact production URL, not only a CMS preview, local fixture, or isolated code sample. Confirm the requested URL, final URL, HTTP status, content type, and visible result agree with the page you intended to process. Test at least one normal case, one sparse page, one redirected URL, and one expected failure so the interface communicates limitations clearly.
- Keep source URLs and observation times with exported results.
- Use descriptive labels, headings, and error messages.
- Specify image dimensions and keep media files lightweight.
- Test keyboard access and narrow mobile layouts.
- Separate automatic checks from recommendations requiring judgment.
- Respect access controls, publisher policies, privacy, and applicable law.
After deployment, rerun the workflow against representative URLs and monitor for changes in output size, missing fields, status codes, response time, and template behavior. Keep a known-good result for comparison. When a check fails, fix the source template or data pipeline rather than hiding the warning in the interface.
Frequently asked questions
What are Open Graph meta tags?
A set of meta properties in the page head, prefixed og:, that tell social platforms which title, description, image and URL to use when the page is shared. Without them a platform guesses from the page content, usually badly.
Why is my Open Graph image not showing on LinkedIn?
Usually a relative image URL, an image blocked to bots, or LinkedIn serving a cached preview from before the tags were fixed. Use the LinkedIn Post Inspector to force a refresh after correcting the tags.
Do Open Graph tags improve rankings?
They primarily control sharing presentation. Better previews can improve engagement but do not replace search relevance and quality.
Why does an old image still show?
The platform may cache previews. Verify live tags and the image, then request a refresh in its debugger.
Can one image be used everywhere?
A fallback is useful, but important pages should use specific representative images.