Open Graph Guides — MyOG.social

Open Graph Basics

Start here if you are fixing missing tags, wrong images, or weak link previews.

How Open Graph images work, where link previews appear, and what to test.

The tags crawlers read: title, description, image, URL, type, and site name.

Use 1200 by 630 images, safe areas, file-size targets, and exact meta tags.

Use these when the browser looks fine but the social preview is still wrong.

Paste a URL, inspect the tags, and preview how the card renders.

Inspect tags on the current page without leaving the browser.

Test crawler access, cached previews, localhost, redirects, and image fetches.

Refresh stale previews and know when to version the og:image URL.

Which debugger to use for Facebook, LinkedIn, X, Slack, and chat apps.

Wrong image, old image, no image, duplicate tags, cache, and crawler checks.

Add OG images to the stacks where static HTML and crawlers can disagree.

Use the MyOG Social plugin, with notes for common SEO plugin setups.

Prerender Vue SPA routes so crawlers see SEO and Open Graph tags.

Reference pages for the bots that fetch pages and images for previews.

Real social preview images, reviewed for clarity, coverage, and page-specific fit.

Facebook, LinkedIn, X, Slack, Discord, Telegram, WhatsApp, and more.