Open Graph Meta Tags: Control Social Media Link Previews

You publish a great blog post. Someone shares it on LinkedIn. Instead of your headline and featured image, the link preview shows a broken thumbnail, a generic tagline, and a URL that tells nobody what the content is about.

This happens because you did not set up Open Graph meta tags. When a social platform encounters a shared link, it scrapes the page looking for specific meta tags that define title, description, and image. Without those tags, the platform guesses, and it usually guesses poorly.

Open Graph tags take 5 minutes to set up and dramatically improve how shared content looks. They are one of the highest-impact, lowest-effort fixes for your website's social presence.

What Are Open Graph Tags

Open Graph is a protocol created by Facebook in 2010. It defines a set of meta tags that sit in the section of your HTML and tell social platforms how to display your page. The protocol has since been adopted by LinkedIn, Discord, Slack, iMessage, WhatsApp, and most other platforms that render link previews.

The essential Open Graph tags:

`html `

These six tags cover most social sharing scenarios. The title and description should be different from your HTML

Use a Meta Description Generator to draft both your SEO meta description and your OG description. The tool helps you stay within character limits while making the text compelling.

The OG Image: The Single Most Important Tag

The image is what people see first. A great image makes people click. A missing or broken image makes them scroll past.

Technical requirements for OG images:

• Recommended size: 1200x630 pixels (1.91:1 aspect ratio). This works well across Facebook, LinkedIn, Twitter, and Discord
• Minimum size: 600x315 pixels. Below this, some platforms will not show the image at all
• File format: JPEG or PNG. JPEG is smaller, PNG is better for text-heavy graphics
• File size: Under 1MB. Larger files may time out when the platform tries to fetch them
• URL: Must be an absolute URL (https://...), not a relative path

Use an Image Resizer to create properly sized OG images from existing graphics. If your blog post has a 1920x1080 featured image, resize it to 1200x630 for the OG tag to ensure it displays correctly without awkward cropping.

For best results, create a custom OG image for each page rather than using a generic site-wide image. Blog posts should have images that include the post title as text overlay, making the content immediately clear in a feed.

Some common mistakes: - Using your logo as the OG image (too small, no context) - Using a photo with important content at the edges (platforms crop differently) - Putting critical text in the outer 10% of the image (gets cut off on some platforms) - Forgetting to update the OG image when you update the page content

Twitter Card Tags

Twitter (X) has its own meta tag format called Twitter Cards. They are similar to Open Graph tags but use a different namespace:

`html `

The twitter:card value determines the layout: - summary: small image to the left, text to the right. Good for articles - summary_large_image: large image on top, text below. Better for visual content - player: for video content - app: for mobile app downloads

In practice, if you set both Open Graph and Twitter Card tags, Twitter will use the Twitter-specific tags and fall back to OG tags for anything missing. Most other platforms only read OG tags. So the safest approach is to include both sets.

For pages with special characters or query parameters in the URL, use a URL Encoder to ensure the URL in your og:url tag is properly encoded and will resolve correctly when platforms request it.

Implementation in Popular Frameworks

Static HTML: Add meta tags directly to the of each page.

Next.js (App Router): `typescript export const metadata = { openGraph: { title: 'Page Title', description: 'Description', images: [{ url: '/og-image.jpg', width: 1200, height: 630 }], }, twitter: { card: 'summary_large_image', title: 'Page Title', description: 'Description', images: ['/og-image.jpg'], }, }; `

WordPress: Plugins like Yoast SEO and Rank Math handle OG tags automatically. They add a visual editor where you can customize the title, description, and image for each post.

Gatsby and Hugo: Both support OG tags through their head management systems. Gatsby uses react-helmet or the built-in Head API, Hugo uses template partials in the section.

For dynamic pages (e-commerce products, user profiles, dashboards), generate OG tags server-side. Social platform crawlers do not execute JavaScript, so client-rendered OG tags will not work. This is why Next.js server components and similar SSR solutions are important for social sharing.

If you are using an API to generate dynamic OG images (Vercel OG, Cloudinary, Satori), the image URL in your meta tag should point to the API endpoint. For example: https://yoursite.com/api/og?title=Hello+World generates an image with "Hello World" as text overlay.

Testing and Debugging OG Tags

After adding OG tags, test them before sharing widely. These tools show you exactly how your link preview will appear:

Facebook Sharing Debugger (developers.facebook.com/tools/debug/): Fetches and displays all OG tags found on your page. Also clears Facebook's cache of your page, which is useful when you have updated tags but the old preview still shows.

Twitter Card Validator (cards-dev.twitter.com/validator): Shows how your Twitter Card will render. Note that Twitter caches aggressively; it may take hours for updated tags to reflect.

LinkedIn Post Inspector (linkedin.com/post-inspector/): Tests how your link will appear in LinkedIn posts and articles.

Open Graph Preview (opengraph.xyz): Platform-agnostic preview tool that shows all parsed tags.

Common debugging issues:

• Image not showing: The image URL might be relative instead of absolute, blocked by robots.txt, or too large for the platform to fetch within its timeout
• Old preview persisting: Platforms cache OG data aggressively. Use each platform's debug tool to force a re-fetch
• Wrong title/description: Check for duplicate meta tags. If you have both a plugin and manual tags, they may conflict
• Tags not visible to crawlers: If your page is client-side rendered (React SPA without SSR), social crawlers cannot see the tags. You need server-side rendering or prerendering for OG tags to work

Advanced OG Tags for Specific Content Types

Beyond the basic tags, Open Graph supports additional properties for specific content types:

Articles: `html `

Products: `html `

Videos: `html `

You can also specify multiple images for a page. Platforms will typically use the first one but some (like Pinterest) may let users choose:

`html `

For multi-language sites, og:locale and og:locale:alternate tell platforms which language the content is in and what other language versions are available.

FAQ

Do Open Graph tags affect SEO rankings?

Not directly. Google does not use OG tags as a ranking factor. However, OG tags indirectly help SEO by increasing click-through rates when your content is shared on social media. More clicks and engagement lead to more traffic, backlinks, and brand recognition, all of which do influence search rankings.

How often should I update OG images?

Update OG images when the content changes significantly. For evergreen pages, a good OG image can last indefinitely. For seasonal content, promotions, or time-sensitive articles, update the image to reflect current information. After updating, use each platform's debug tool to clear the cached version.

Can I use different titles for SEO and social sharing?

Yes, and you should. Your HTML

What happens if I do not set OG tags at all?

Platforms will fall back to your HTML