Open Graph Tag Generator

Create Open Graph tags so links look right on social media.

Preview

Image preview
your-site.com
Page title
Description preview

What Open Graph Tag Generator does

Open Graph tags control how a link looks when it's shared on Facebook, LinkedIn and most other platforms that build a link preview card. Without them, a shared link often shows a blank image and a mismatched title pulled from wherever the crawler could find text. This tool turns a title, site name, description and image into the exact Open Graph markup to fix that.

How to generate Open Graph tags

  1. Fill in the title, site name, and a one- or two-sentence description.
  2. Add an image URL โ€” ideally sized around 1200ร—630 pixels, the dimension most platforms crop to.
  3. Copy the generated tags and paste them into the page's HTML <head>.

Why image size matters

Platforms crop the preview image to a fixed aspect ratio, close to 1.91:1. An image sized far outside that ratio โ€” a tall portrait photo, for instance โ€” tends to get cropped awkwardly, cutting off faces or key details. Using an image close to 1200ร—630 pixels avoids that.

Common uses

  • Blog posts and articles โ€” making sure a shared link shows the right headline and cover image.
  • Product pages โ€” showing the actual product photo and name instead of a generic site logo.
  • Fixing a broken preview reported by a marketing team or noticed after sharing a link.

Pertanyaan yang sering diajukan

Do I need separate tags for Facebook, LinkedIn and other platforms?

No โ€” Open Graph is a shared standard most platforms read the same way, so one set of tags covers all of them. X/Twitter has its own card format, which the Twitter Card Generator covers.

What happens if I don't include an image?

The platform will usually fall back to whatever image it can find elsewhere on the page, or show no image at all โ€” neither makes for an appealing preview.

Where exactly do these tags go?

Inside the page's HTML <head> section, alongside the page's other meta tags.

Can I preview how the card will actually look before publishing?

This tool generates the code; to see a rendered preview of how a live page's tags currently look, use the Open Graph Checker instead.

Why would a platform ignore my Open Graph tags and show something else?

Most platforms cache a link's preview the first time it's shared, so an old cached version can persist even after you update the tags โ€” clearing that platform's cache for the URL usually fixes it.

Lebih banyak di Meta Tag & Social Tools