These are general best practices for writing Open Graph markup by hand or in your CMS. OG Preview itself is a viewer: it renders how your tags will look and, in Fetch URL mode, reports which tags a page already exposes.
Use unique tags per page type
Different pages deserve different previews. Blog posts work best with og:type set to article, product pages benefit from a descriptive title and image, and your homepage should emphasise brand identity. Reusing one generic preview everywhere lowers click-through.
Optimise the image for speed
Avoid multi-megabyte PNGs. Compress to a reasonable size, keep the 1200×630px (1.91:1) dimensions that work across platforms, and make sure the file loads quickly for crawlers.
Always set og:site_name
This keeps your brand name visible in previews even when the title is truncated:
Test across platforms — don't assume
Facebook, LinkedIn and X (Twitter) each handle meta tags a little differently. Preview here first, then verify on the real platforms with their official tools:
- Facebook Sharing Debugger — the same scrape also drives WhatsApp and Instagram previews.
- LinkedIn Post Inspector
- X (Twitter): the old Card Validator has been retired. X re-reads your tags when a link is posted, so preview from a locked test account, or append a
?v=2query to bypass its cache.
Use og:type for richer content
For blogs use article; for products use product. The right type can unlock richer rendering such as author names or publication dates on some platforms.
Set an absolute image URL
Social crawlers do not resolve relative paths. Always use a full URL: https://yoursite.com/img/og.jpg, not /img/og.jpg.
Cache-busting for updated images
When you replace an OG image, platforms may keep serving the old one. Change the filename (for example og-v2.jpg) or append a version query such as ?v=2, then re-run the platform debugger to refresh the cache.
Pair OG tags with JSON-LD
Structured data via <script type="application/ld+json"> helps search engines, while OG tags handle social sharing. They complement each other — keep both.
Describe the image with og:image:alt
Add alternative text so screen-reader users and platforms that surface it get a description of the picture:
Keep it under about 120 characters and describe what the image shows, not the page it belongs to.
Add article metadata for posts
When og:type is article, a few extra tags let some platforms show author and date:
Use ISO-8601 timestamps. These are ignored where unsupported, so they never hurt.
Product previews for shops
For a store, og:type product plus price tags gives richer cards on the platforms that read them:
Serve the right language
On a multilingual page, tell platforms which locale the preview is in and what alternatives exist:
Use the language_TERRITORY format (underscore, not hyphen) — a frequent copy-paste mistake that silently breaks the tag.
Keep real text out of the image
It is tempting to bake the headline into the OG image, but text near the edges gets cropped on large cards, and it can't be translated or read by assistive tech. Put the words in og:title; let the image carry mood, product or brand.
Generate images per page automatically
Hand-making an image for every article does not scale. A serverless renderer such as Vercel's @vercel/og builds a 1200×630 PNG from a template — title, author, a background — at request time, and you point og:image at that endpoint. Every share stays on-brand with zero manual design work per page.