Open Graph Guides: OG Tags, Image Size & Examples
Learn Open Graph tags step by step: og:title, og:image size, og:type, Twitter cards and Facebook link previews, with copy-paste code and real examples.
Basics
Start here if Open Graph is new. These guides explain what the protocol is, which tags a page needs, how a preview is built, and how the tags relate to search.
What is Open Graph?What Open Graph tags are, how a link card is built from them, and which tags to set first.
Open Graph tags cheat sheetEvery Open Graph tag by group, plus Twitter card tags, with copy-paste code for each.
Open Graph previewWhat an Open Graph preview shows and which tags matter.
What is an OG image?How the og:image tag works, the size and format to use, and why an image does not appear.
Open Graph examplesCopy-paste tags for blog posts, products, homepages, docs, events, and profiles, plus a template.
Open Graph and SEOWhat Open Graph tags do for search, where they overlap with SEO, and one head setup for both.
Tags
One guide per tag, with length advice, examples, and the mistakes that show up most often on live pages.
og:titleHeadline length, examples by page type, and how og:title differs from the HTML title.
og:descriptionSummary length, what platforms use when the tag is missing, and product page examples.
OG image checkerCheck an og:image URL, preview the file, and read dimensions when they can be determined.
og:typeWhen to use website or article, the other Open Graph types, and the article tags.
og:urlWhat og:url does, how it matches the canonical URL, and the mistakes that split one page into several.
og:site_nameWhat the site name tag does, how it differs from og:title, and how to set one value.
og:localeThe locale format, choosing en_US or en_GB, and listing translations with og:locale:alternate.
Platforms
How Facebook, LinkedIn, X, WhatsApp, Telegram, Slack, and Discord read the same tags, where their cards differ, and why a shared card can stay out of date, plus where Shopify and Magento stores print the tags.
Facebook link previewOpen Graph tags that usually shape a Facebook link preview.
LinkedIn previewOpen Graph title, description, and image LinkedIn commonly uses.
Twitter card checkertwitter:card, title, description, and image, with an estimated summary or large-image card.
WhatsApp link previewThe tags WhatsApp reads, image size and weight, caching, and why a preview does not show.
Telegram link previewThe Open Graph tags Telegram reads, the image size, and why a sent message keeps its card.
Slack link previewHow a Slack unfurl uses Open Graph title, description, and image on a public page.
Discord link previewHow a Discord embed is built from Open Graph tags, and why a sent message keeps the old card.
Shopify and MagentoWhere store themes print Open Graph tags, which fields fill them, and how to fix product cards.
Redirects
What redirect status codes tell browsers and search engines, and how to check a chain on a live URL.
Fixes and setup
Pages for a missing image, a heavy WhatsApp image, a description that repeats the title, a missing Twitter card, framework image tags, and a sitemap Search Console could not read.
OG image not showingWhy a share image is missing, from a relative URL to a blocked file, and how to fix the tag.
WhatsApp image too largeHow to shrink a share image toward 300 KB so a chat preview is more likely to show it.
Description repeats titleWhat to write when the share description is a copy of the title.
Missing Twitter cardWhat X does when twitter:card is missing, and which Open Graph tags it can fall back to.
og:image:altThe text description of a share image, and how it differs from the alt on an img in the page.
Next.js Open Graph imagesMetadata, an opengraph-image file, or a generated image, plus the same tags in React and Vue.
Sitemap errorsWhy Search Console could not read a sitemap, and how to fix the XML, the URLs, and the size limits.
Using the guides with the tools
Most guides end with a check on a live URL. Paste the page into the Open Graph checker to see the tags the server returns, or into the meta tag checker for the title, canonical URL, and robots tags beside them.
The image guides pair with the OG image size tool, which crops a file to 1200 × 630, and the OG image generator, which builds a share image from a template. The SERP preview shows how a title and description may fit in a search result, the redirect checker follows a URL hop by hop, and the sitemap generator crawls a site into sitemap.xml.