Open Graph Tags: Complete Guide to OG Meta Tags for Social Sharing

Open Graph (OG) meta tags are HTML meta elements that control how a webpage appears when shared on social media platforms, messaging apps, and link aggregators. When someone pastes a URL into Facebook, LinkedIn, Twitter, Slack, Discord, WhatsApp, or iMessage, the platform fetches the page and reads the OG tags to build a preview card with a title, description, and image.

Open Graph was originally developed by Facebook and released in 2010. It is now the de facto standard for social sharing metadata, supported by virtually every platform that creates link previews. The protocol is maintained by the Open Graph Protocol website and defined at ogp.me.

Without OG tags, platforms make a best guess at the preview content — usually taking the page title from the <title> tag, the description from the first <p> element, and the image from the first <img> tag. These guesses are often wrong, using navigation images or generating no image at all. Adding OG tags gives you full control over how every page appears when shared.

The Open Graph protocol defines four required properties for every page. og:title is the title of the object — usually the page title. It can differ from the HTML <title> tag, which is useful when the page title is too long for a social share card. og:type is the type of the object: website for most pages, article for blog posts, product for e-commerce items, video.movie for video content.

og:image is the URL of the image that represents the object. This is the most important OG tag — a compelling image dramatically increases engagement on shared links. Use an absolute URL including the protocol (https://). og:url is the canonical URL of the page. It should be the permanent, canonical version of the URL without tracking parameters, so all shares of the page aggregate to the same URL in Facebook analytics.

While the protocol marks these four as required, many platforms render a preview even when some are missing by falling back to other meta tags. However, relying on fallbacks leads to inconsistent results across platforms. Always specify all four required tags plus a meta description as a fallback for platforms that read it.

The recommended og:image size is 1200x630 pixels (1.91:1 aspect ratio). This is the size that renders without cropping on Facebook, LinkedIn, Twitter summary_large_image cards, and most other platforms. Images smaller than 600x315 pixels may not display at all on some platforms. Images with a different aspect ratio get cropped, often in ways that cut off important content.

Use JPEG for photographs and images with many colors — it produces smaller file sizes at acceptable quality. Use PNG for images with text, logos, flat colors, or areas that need crisp edges. Maximum file size is typically 8 MB (Facebook) or 5 MB (Twitter), but aim for under 1 MB for fast loading. WebP is increasingly supported but may still fall back to JPEG/PNG on some platforms, so stick to JPEG or PNG for maximum compatibility.

Design OG images with the most important content centered, because some platforms apply rounded corners or additional cropping. Include your brand name or logo for recognition. Use high-contrast text that is readable at thumbnail size — the card may be as small as 80px wide on mobile. Avoid including the URL in the image, as platforms display it separately. Tools like Canva, Figma, and image generation APIs (Cloudinary, Vercel OG) can automate OG image creation.

og:description is a one to two sentence description of the page. Not part of the four required tags but used by most platforms when available. Keep it under 200 characters for best display across platforms. og:site_name is the name of your website (not the page title). og:locale specifies the language and territory of the content in the format language_TERRITORY (e.g., en_US, fr_FR, de_DE). og:locale:alternate adds alternate locales for multilingual sites.

For article type pages, additional tags are available. article:author is the URL of the author profile. article:published_time and article:modified_time specify the publish and update dates in ISO 8601 format. article:section is the content category. article:tag adds content tags. Facebook uses these for article metadata display, and LinkedIn uses article:published_time for its content formatting.

og:image:width and og:image:height specify the image dimensions and prevent layout shifts while the image loads. og:image:alt provides alternative text for the image, improving accessibility for screen reader users on platforms that respect it. Multiple og:image tags can be defined for a page, giving platforms options to choose from — the first image is typically used if no size information is provided.

Twitter has its own meta tag system called Twitter Cards that works alongside Open Graph. Twitter falls back to OG tags when Twitter Card tags are not present, but Twitter-specific tags give you more control and access to Twitter-specific card types. The most important Twitter Card tag is twitter:card, which defines the card layout.

summary_large_image is the recommended twitter:card value — it displays a large image above the title and description, similar to a Facebook link preview. summary shows a smaller thumbnail to the left of the text. The other card types (app, player) are for mobile app installs and video content respectively.

If you have OG tags set correctly, Twitter falls back to og:title, og:description, and og:image automatically. You only need to add Twitter-specific tags if you want the twitter:site (your Twitter @username), twitter:creator (the author Twitter handle), or if you need to specify a different image for Twitter than for other platforms using twitter:image.

Facebook provides the Sharing Debugger tool at developers.facebook.com/tools/debug. Enter your URL to see exactly how Facebook scrapes your page, which OG tags it finds, what the preview looks like, and any warnings or errors. If you have recently updated OG tags and the old preview still appears, use the Scrape Again button to force Facebook to re-fetch the page and clear its cache.

LinkedIn Post Inspector at linkedin.com/post-inspector allows you to test how a URL will appear as a LinkedIn post. LinkedIn caches link previews aggressively — after updating OG tags, use the Post Inspector to force LinkedIn to clear the cached preview. LinkedIn uses og:title, og:description, and og:image, and ignores Twitter Card tags.

For Twitter, use the Card Validator at cards-dev.twitter.com/validator. For general OG tag inspection without logging in to any platform, open your page in Chrome DevTools, go to the Elements tab, and search for og: to see all OG meta tags in the head. The MetaTags.io online tool allows quick visual preview of how a URL appears across Facebook, Twitter, LinkedIn, Slack, and Google.

Next.js 13+ App Router supports OG metadata through the generateMetadata function. Export a generateMetadata async function from a page.tsx file to set OG tags dynamically based on the page content — useful for blog posts, product pages, and any page where the title and image change per route.

For dynamically generated OG images, Next.js provides the @vercel/og package with ImageResponse, which renders a React component to a PNG image at request time. Define the OG image in app/opengraph-image.tsx and it is automatically used as og:image. This approach generates customized OG images per page (with the post title, author, and date embedded in the image) without manual image creation.

If you are using Next.js Pages Router, set OG tags using next/head: import Head from next/head and place meta tags inside the Head component in each page. For dynamic pages, fetch the page data in getStaticProps or getServerSideProps and pass the OG values as props to the Head component.

Open Graph tags are not a direct ranking factor for Google Search. Google reads structured data (schema.org markup), meta title, and meta description for search snippets — not OG tags. However, OG tags indirectly affect SEO through social sharing. A compelling OG image and title increases click-through rates on shared links, which drives traffic. More traffic signals to search engines that the page is valuable.

Google sometimes uses og:title and og:description as fallbacks when the HTML title and meta description are absent or unsuitable. Google may also use og:image in Google Discover cards and in some search result types, particularly for AMP articles and news content. While OG tags are not primary SEO signals, they ensure your pages are represented correctly across all discovery surfaces.

The practical SEO impact of OG tags comes from the shared link click-through rate. A link shared on LinkedIn with a professional OG image and compelling title generates more clicks than a link with a broken or missing preview. Those clicks drive real traffic. For content marketing campaigns, email newsletters, and social media sharing, OG tags directly affect the effectiveness of your distribution.

Facebook uses OG tags as the authoritative source for link preview content. It caches previews aggressively and re-crawls infrequently. Use the Sharing Debugger to force a re-crawl after changes. Facebook requires the OG image to be at least 200x200 pixels and recommends 1200x630. Facebook also respects og:type article and shows article metadata for properly tagged blog posts.

LinkedIn follows OG tags with a few quirks. It shows the site name from og:site_name below the link. It requires a minimum image resolution of 1200x627 pixels for large image cards and falls back to a small thumbnail if the image is too small. LinkedIn caches are notoriously persistent — even after updating OG tags and scraping with Post Inspector, some users may see the old preview for hours.

Slack and Discord both display OG link previews in messages. Slack respects og:title, og:description, and og:image, with a preference for images in the 700x400 range. Discord uses a similar implementation. Both allow users to dismiss link previews, and both re-fetch after a short cache period (minutes to hours rather than days) so updates propagate relatively quickly.

The fastest way to test OG tags is to view the page source and search for og: to find all OG meta tags. Verify that og:image contains an absolute URL (not a relative path), that og:title is set, and that og:description is present. Load the image URL directly in a browser to confirm it is accessible and returns the correct image.

Use the Open Graph generator tool on this site to build your OG tags and then copy the HTML directly into your page head. After implementing, use the Facebook Sharing Debugger, LinkedIn Post Inspector, and the Twitter Card Validator to test how each platform renders the preview. Take a screenshot for each platform to have a before-and-after record.

For large sites with many pages, automate OG tag testing by fetching a sample of URLs with curl (using curl -s URL | grep og:) or writing a sitemap crawler that checks for required OG tags and reports missing or malformed ones. Include OG tag presence in your site audit checklist and CI pipeline if your site has dynamic OG generation.