Open Graph Tags: What They Are and How to Set Them
Open Graph tags are a set of HTML meta attributes that control how your web pages look when shared on social media. Introduced by Facebook in 2010 and now used by virtually every major social platform, these tags tell networks what title, image, and description to display in a link preview card. If you have ever wondered why some shared links look polished and professional while others show a broken image or generic text, the answer is almost always in the Open Graph configuration. This guide explains every important tag and how to implement them correctly.
The Open Graph Protocol: A Brief History
The Open Graph protocol was created by Facebook engineers and announced at the f8 developer conference in April 2010. The goal was straightforward: give web publishers a standardized way to specify exactly how their content should be represented when shared on Facebook. Before Open Graph, Facebook had to guess which image and text to use for link previews. It would scrape the page and try to infer the title from the HTML title tag, pick a random image from the page, and construct a description from the first few lines of body text. The results were unpredictable — logos, navigation images, and sidebar widgets would appear as the preview image. Titles would include the site name template alongside the actual headline. Open Graph solved this by putting the author in control. By adding a few meta tags, a developer could tell Facebook exactly which image to use, what the title should say, and how to describe the content. Within a few years, Twitter, LinkedIn, Pinterest, Slack, WhatsApp, iMessage, and Discord all adopted Open Graph as a fallback or primary standard for link unfurling. Twitter extended the system with its own Card tags, and Pinterest added its own Rich Pins format, but both read OG tags as a base. Today, Open Graph tags are a standard part of any well-configured website. They are not a ranking factor for search engines like Google, but they are the primary mechanism that makes shared links look professional and clickable on every social and messaging platform. The protocol is documented at ogp.me, and it is remarkably simple — you only need five tags to have a complete basic configuration.
Every Open Graph Tag Explained
There are dozens of Open Graph tags in the full specification, but most websites only need to implement a core set. Here is what each important tag does. og:title — The title of your page as it will appear in link card previews. This should be descriptive and under 60 characters to avoid truncation. It does not need to match your HTML <title> tag exactly — it can be optimized for social sharing. Example: <meta property="og:title" content="Free Image Compressor — Compress JPEG and PNG in Browser" /> og:description — A short summary of the page content. Keep it between 130 and 155 characters. This is the text that appears below the title in most link cards. Make it compelling — it is effectively an ad for your content. Example: <meta property="og:description" content="Compress images up to 90% smaller without losing quality. No upload, no account, works offline." /> og:image — The URL of the image to show in the link card. Must be an absolute HTTPS URL. Ideal dimensions: 1200×630 pixels. This is the most impactful tag — a good OG image dramatically increases click-through rates. Example: <meta property="og:image" content="https://example.com/images/og-image.jpg" /> og:url — The canonical URL of the page. This prevents duplicate content issues if your page can be reached at multiple URLs. Example: <meta property="og:url" content="https://example.com/tools/image-compressor" /> og:type — The content type. Use website for most pages and article for blog posts and news. Example: <meta property="og:type" content="website" /> og:site_name — The name of your website, shown below the title in some platforms. Example: <meta property="og:site_name" content="WikiPlus" /> For blog articles, add: og:published_time, og:author, and og:section to enable rich article previews on Facebook and LinkedIn. For Twitter, add: twitter:card (set to summary_large_image), twitter:title, twitter:description, and twitter:image. These override the OG values on Twitter and let you customize the Twitter card independently.
How to Add Open Graph Tags to Any Website
Adding Open Graph tags is a matter of placing meta elements in the <head> section of your HTML. The exact method depends on your platform. Plain HTML sites: Open the HTML file for each page and add the tags manually between the <head> and </head> tags. Place them after your existing <title> and charset meta tags. For large sites, use a template system so you only need to write the tag structure once and inject the page-specific values dynamically. WordPress: The easiest method is to install a dedicated SEO plugin. Yoast SEO (free version available) generates all OG tags automatically from your post's featured image, title, and excerpt. You can also override values per-post from the SEO meta box. Rank Math and All in One SEO are equally capable alternatives. Webflow: In the designer, click on the page you want to configure, open Page Settings, and scroll to the Open Graph section. Enter the title, description, and upload the image. Webflow handles the tag generation and absolute URL formatting automatically. Shopify: Themes generally include OG tags in the theme.liquid template using Liquid variables. For product pages: {{ product.title }}, {{ product.description | truncate: 155 }}, and {{ product.featured_image | img_url: 'master' }}. Edit the theme if these are missing. Next.js: Use the built-in Metadata API (App Router) or next/head (Pages Router) to set OG tags per page. The Metadata API lets you export a metadata object with openGraph properties, which Next.js renders to the correct meta tags server-side. After adding tags, verify with the OG Preview tool to confirm all four platform views render correctly.
Validating and Troubleshooting Your Open Graph Tags
After adding or modifying OG tags, always verify the output before sharing the URL anywhere. There are three tiers of validation to work through. Tier 1 — Quick visual check: Use the OG Preview tool. Paste your URL and review the simulated cards for Twitter, Facebook/LinkedIn, WhatsApp, and iMessage. This tells you instantly whether each platform will show the correct image, title, and description. Tier 2 — Platform-specific validation: Use the official tools for each platform. Facebook Sharing Debugger at developers.facebook.com/tools/debug/ shows every OG tag Facebook found and warns about missing recommended tags, image size issues, or fetch errors. Twitter Card Validator at cards-dev.twitter.com/validator shows the actual card type and content. Both tools also reset the platform cache, which is important after making changes. Tier 3 — HTML source inspection: If a tool reports that a tag is missing but you are sure you added it, check the raw HTML source. Right-click the page > View Page Source and search for og:. Confirm the tags are in the static HTML, not inside a JavaScript block. Also check for duplicate tags — the browser renders whichever appears last in the source. Common troubleshooting tips: If og:image is not loading, test the image URL directly in a browser tab. If the title is wrong, search for every og:title tag in the source. If you are using a CMS, check whether your theme and your SEO plugin are both outputting OG tags and disable the one you do not want. For sites built with JavaScript frameworks (React, Vue, Angular), confirm that OG tags are being server-side rendered or pre-rendered, not client-side rendered — social crawlers generally do not execute JavaScript.
Frequently Asked Questions
- Are Open Graph tags the same as meta tags?
- Open Graph tags are a specific type of meta tag. Standard HTML meta tags use the name attribute (e.g., <meta name="description">), while Open Graph tags use the property attribute with an og: prefix (e.g., <meta property="og:description">). Both are placed in the HTML head section. Open Graph tags are not used by search engines for ranking — they are specifically for social media link unfurling. Your standard meta description tag and your og:description tag serve different purposes and should both be set.
- Can I use the same image for all pages, or should each page have its own?
- For best results, important pages should each have a unique og:image. A dedicated image for each page — showing relevant content, a compelling headline, or branded visuals — significantly outperforms a generic logo or site-wide image. At minimum, create unique OG images for your homepage, key landing pages, and any content you actively promote. For lower-priority pages, a branded default image is acceptable, but never leave og:image empty or pointing to a generic placeholder.
- Do Open Graph tags affect my search engine ranking?
- Open Graph tags are not a direct Google ranking factor. Google does not use og:title or og:description for its search results index — it reads the standard HTML title tag and meta description for those. However, good OG tags increase social media click-through rates, which drives more traffic to your site. Higher traffic, lower bounce rates, and more engagement signals can indirectly support better rankings over time. Think of OG tags as a conversion optimization for social shares rather than a direct SEO lever.