Open Graph Meta Tags: Create Better Link Previews — Guide
Learn how Open Graph meta tags control shared link previews, choose image dimensions, and test what social platforms can fetch. Read the steps and example.
Open Graph meta tags describe a webpage when it is shared on compatible social platforms. They can provide a title, description, canonical URL, and preview image. These tags do not change the visible page content, and each platform may cache or interpret them differently. Add tags to the page head, use absolute image URLs that crawlers can fetch, and verify the preview after deployment. A good social preview should match the page and help a person decide whether to open it.
Add the core Open Graph properties
Set og:title, og:type, og:image, and og:url, then add og:description for a useful summary. Use a full canonical URL rather than a relative path. Include image width and height when known, and provide descriptive alt text with og:image:alt. Keep title and description accurate to the visible article. Do not put key information only in an image because preview images may be cropped or omitted by a platform.
Prepare an image that survives cropping
Use a high-quality image with enough resolution for the target platform and keep important subjects away from the extreme edges. Social cards may crop or resize the source differently across devices. Avoid tiny text, logos you do not own, and design elements that become misleading when cropped. Check that the image URL returns a public image with a successful HTTP response and an appropriate content type. A local preview cannot prove that an external crawler can access it.
Refresh platform caches after changes
Platforms often cache link previews, so edits may not appear immediately. Use the platform’s official sharing debugger or inspection tool to request a refresh where available. Check the final page source rather than only client-rendered DOM, because some crawlers do not execute JavaScript consistently. Keep Open Graph data and standard page metadata aligned, and monitor redirects so the shared canonical URL resolves to the intended page.
Worked example
<meta property="og:title" content="A practical guide to sharing links">
<meta property="og:description" content="Create a clear, accurate social preview.">
<meta property="og:url" content="https://example.com/guide">
<meta property="og:image" content="https://example.com/guide-cover.jpg">Do Open Graph tags improve Google rankings?
They are mainly for link previews on social platforms. They are not a direct guarantee of improved search rankings.
Reference and further reading
KEEP EXPLORING
Another useful idea.
Generate a Zod Schema from JSON Without Overfitting Samples
Infer nested Zod objects, arrays, unions, optional keys and null values, then refine the schema for your application.
robots.txt vs noindex: Crawling and Search Visibility
Choose between crawler access rules, noindex instructions and authentication without accidentally hiding the directive from the crawler.
Robots.txt Mistakes: Root Placement, Paths and Staging Rules
Review crawler policy mistakes involving file location, path case, staging block rules, sitemap directives and rendering assets.