Open Graph Meta Tags: Fix Social Previews

Use this Open Graph checklist to fix wrong social previews, validate metadata, images, URLs, redirects, and cached link results.

When a shared link displays the wrong title, image, or description, the problem is usually traceable to metadata, URL handling, crawler access, or cached results. This Open Graph meta tags checklist shows how to inspect the rendered HTML, build a reliable social-sharing template, validate image and URL values, and troubleshoot previews across platforms without guessing.

Overview

Open Graph meta tags describe a web page when it is shared through services that support link previews. They are placed in the <head> of the page and commonly define the preview title, description, canonical URL, and image. A typical implementation looks like this:

<meta property='og:type' content='website'>
<meta property='og:title' content='A clear page title'>
<meta property='og:description' content='A concise description of the page.'>
<meta property='og:url' content='https://example.com/example-page'>
<meta property='og:image' content='https://example.com/images/example-page.jpg'>
<meta property='og:image:alt' content='Description of the image'>

Some platforms also use Twitter Card metadata. A practical template can include both sets of tags:

<meta name='twitter:card' content='summary_large_image'>
<meta name='twitter:title' content='A clear page title'>
<meta name='twitter:description' content='A concise description of the page.'>
<meta name='twitter:image' content='https://example.com/images/example-page.jpg'>

Open Graph and Twitter Card fields are not a substitute for a page title, meta description, canonical link, or accessible content. They are a separate layer of metadata intended to improve how a URL is represented when it travels beyond your site.

Reference table

Field	Purpose	Implementation guidance
`og:title`	Title shown in a shared preview	Use the page's specific, readable title; avoid adding unnecessary site-wide text.
`og:description`	Supporting preview copy	Summarize the page's value in a sentence that makes sense without surrounding context.
`og:image`	Preview image	Use a publicly reachable absolute URL and check its crop at small sizes.
`og:url`	Preferred shared URL	Use the final, canonical version of the page URL.
`og:type`	Broad content type	Use a value appropriate to the page and keep the choice consistent in your templates.
`og:image:alt`	Image description	Describe the meaningful content of the image rather than repeating the page title.
`twitter:card`	Card presentation hint	Choose the card format supported by your implementation and test the resulting appearance.

Checklist by scenario

Before publishing a new page

Write a page-specific og:title and og:description. Do not leave values blank or let a generic template describe every page.
Choose an image that still communicates the subject when displayed as a small thumbnail. Keep important text, logos, and faces away from edges that may be cropped.
Set og:image and og:url to absolute HTTPS URLs that resolve without requiring a logged-in session.
Confirm that the tags are present in the server-rendered HTML or in the final document available to crawlers. Inspecting only a client-side preview in development may hide rendering problems.
Share the final URL, not a temporary staging address, tracking-heavy variant, or redirecting short URL.

After a redesign or template change

Compare the metadata output for a homepage, an article, a product or service page, and a page with an unusual title or image.
Check for duplicate Open Graph tags. A component, layout, and SEO plugin can each add a different value, leaving the receiving platform to choose unpredictably.
Verify that image paths still work after changes to asset storage, CDN configuration, domains, or URL rewriting.
Inspect pages with dynamically generated metadata. A fallback title may appear if data loading fails or if the page is rendered only after JavaScript executes.

When a preview is wrong

View the page source or use browser developer tools to find the actual og: and twitter: values delivered for that URL.
Check whether the shared URL redirects. Follow the redirect chain and confirm that the final page has the expected tags.
Open the image URL directly in a private browser window. Confirm that it returns an image rather than an HTML error page, access challenge, or expired response.
Test the exact URL variant being shared, including protocol, trailing slash, query parameters, and capitalization where relevant.
Use the destination platform's available preview or debugger tool to request a fresh inspection. Results may remain stale after a valid fix, so record the time of the change and test again later.

During a domain migration

Update every absolute metadata URL, including og:url, og:image, and Twitter Card image values.
Keep redirects from old URLs working while shared links and external references transition.
Check DNS, HTTPS, and host configuration before diagnosing the tags themselves. A correct meta tag is not useful if the crawler cannot reach the host.
Review templates, XML or CMS data, structured internal links, and social-image storage for old-domain references.

For related infrastructure checks, see the DNS Records Guide and the URL Encoder and Decoder Guide.

What to double-check

Rendered output, not just source configuration

CMS settings, framework components, and environment variables do not prove that the correct metadata reaches a crawler. Inspect the response delivered at the public URL. If your application renders metadata in the browser, confirm that the relevant platform can process that implementation; when in doubt, server-render the essential values.

Absolute, reachable URLs

Use complete URLs such as https://example.com/images/share-card.jpg, not relative paths such as /images/share-card.jpg. The image host should be available without authentication, and the response should identify and deliver the intended image. Redirects can be valid in some setups, but a direct, stable image URL is easier to diagnose.

Image composition and file behavior

There is no single image treatment that looks identical everywhere. Design a clear focal point, use readable contrast, and avoid placing essential information at the extreme edges. Check the file's dimensions, format, size, and server response; oversized files, unsupported formats, or accidental HTML responses can prevent a useful preview.

Fallback metadata

Keep the standard <title>, meta description, and meaningful page content accurate even when Open Graph fields are missing or ignored. A robust page has coherent metadata across all layers instead of relying on one platform-specific field.

When debugging a page that also exposes API data or embedded configuration, a JSON Formatter and Validator can help make generated values easier to inspect. For access-control changes, review your robots.txt and Content Security Policy configuration separately; neither should be assumed to explain every preview issue.

Common mistakes

Using relative image URLs: A browser may resolve them successfully while a remote crawler does not handle the request as expected.
Putting tags outside the head: Metadata inserted into the body or into an invalid document structure can be ignored.
Reusing one image for every page: A generic image can make previews ambiguous, especially for articles, products, documentation, and landing pages.
Adding several competing values: Duplicate og:title or og:image fields make the result harder to predict and maintain.
Testing a different URL: The homepage, canonical URL, redirected URL, and URL with tracking parameters may not return identical metadata.
Assuming a cache means the fix failed: Preview systems can retain an earlier fetch. First verify the live response, then use the platform's refresh mechanism where available.
Including sensitive data: Do not place credentials, private customer information, unpublished details, or internal URLs in public metadata or images.
Ignoring accessibility: Use meaningful alternative text for images and ensure that the page itself remains understandable without the preview card.

When to revisit

Make link-preview checks part of the publishing workflow rather than a one-time setup task. Revisit the checklist in these situations:

Before a seasonal campaign, product launch, event, or major content release.
After changing a site theme, framework, CMS, SEO plugin, image pipeline, CDN, or caching layer.
When replacing social images, revising page-title templates, or changing canonical URL rules.
During a domain, protocol, hosting, or URL-structure migration.
When a team reports that a shared link shows an old, blank, incorrect, or unrelated preview.
When a platform changes its preview behavior or when your debugging workflow no longer matches its current interface.

For a practical final pass, choose one representative URL from each important page type. Check the rendered tags, follow the image and page URLs, inspect redirects, test the exact shared URL in an available social media preview debugger, and record any cache delay. Then repeat the same checks after deployment rather than relying only on a local preview. This small, repeatable routine catches most metadata regressions before they spread through campaign links and team workflows.

Open Graph Meta Tags Guide: Preview and Fix Link Sharing Across Social Platforms