When you share a link on Facebook, Twitter, LinkedIn, or any messaging app, the rich preview card that appears — with a title, description, and image — is powered by Open Graph meta tags. Without them, social platforms guess what to display, often producing ugly or misleading previews that hurt your click-through rate. In this comprehensive guide you will learn exactly which tags you need, how to implement Twitter Card tags alongside Open Graph, the best practices that maximize engagement, and how to test everything before you hit publish.
What Is Open Graph?
Open Graph (OG) is a protocol originally created by Facebook in 2010 that turns any web page into a “rich object” in a social graph. By embedding structured metadata inside HTML <meta> tags in the <head> section of your page, you tell social platforms exactly what title, description, image, and URL to display when someone shares your link.
Even though the protocol was designed for Facebook, it has since become the universal standard. LinkedIn, Pinterest, Slack, Discord, WhatsApp, Telegram, iMessage, and dozens of other services read Open Graph tags when generating link previews. If you only optimize one set of social meta tags, Open Graph is the one to choose.
The tags follow a simple, declarative pattern inside your HTML:
<head>
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief summary of your page." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
</head>The Five Essential Open Graph Tags
While the Open Graph protocol defines dozens of optional properties, the following five tags are the most critical. If you set nothing else, make sure every page on your site includes these.
1. og:title
The title of your page as it should appear in the social preview card. Keep it under 60 characters to avoid truncation on most platforms. Importantly, og:title does not have to match your HTML <title> tag — you can craft a more attention-grabbing version specifically for social sharing while keeping your SEO title tag optimized for search engines.
2. og:description
A brief summary of the content, ideally between 120 and 160 characters. This text appears below the title in most social previews and is your primary opportunity to convince someone scrolling through a busy feed to click your link. Write it like ad copy: concise, benefit-driven, and ending with a subtle call to action when appropriate.
3. og:image
The URL of the image displayed in the preview card. This single tag has the biggest impact on engagement — posts with compelling images receive significantly more clicks and shares than those without. Always use an absolute URL starting with https:// because social crawlers cannot authenticate or resolve relative paths. The recommended size is 1200 × 630 pixels at a 1.91:1 aspect ratio, which works well across Facebook, LinkedIn, and Twitter.
4. og:url
The canonical URL for your page. This helps platforms consolidate shares of the same content even when the URL has tracking parameters, query strings, or other variations. It should always point to the clean, canonical version of the page — no UTM parameters, no session IDs.
5. og:type
Describes the type of content. The most common values are website for homepages and general pages, and article for blog posts and news stories. When using the article type, you can add supplementary tags like article:published_time, article:author, and article:section to provide richer context to social platforms.
Twitter Card Tags
Twitter (now X) has its own meta tag system called Twitter Cards. While Twitter will fall back to Open Graph tags if its own tags are missing, adding dedicated Twitter tags gives you finer control over how your content appears on the platform — especially around image sizing and card layout.
The key Twitter Card tags are:
twitter:card— The card type. Usesummary_large_imagefor a large, prominent image above the title, orsummaryfor a smaller square thumbnail beside the text.twitter:title— The title shown in the card. Falls back toog:titleif omitted.twitter:description— A short description. Falls back toog:descriptionif omitted.twitter:image— The image URL. Falls back toog:image, but providing a separate image lets you optimize for Twitter’s preferred 2:1 aspect ratio (1200 × 600 pixels).twitter:site— Your website’s Twitter handle (e.g.,@yoursite).
A complete Twitter Card implementation looks like this:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yoursite" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling summary." />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />For most websites, the practical approach is to set all five Open Graph tags plus twitter:card and twitter:site. Twitter will inherit the rest from your OG tags, saving you from duplicating every value.
A Complete Example
Here is a full set of Open Graph and Twitter Card tags for a typical blog post. You can copy this template and replace the values with your own:
<!-- Open Graph Tags -->
<meta property="og:title" content="How to Boost Your Website Traffic" />
<meta property="og:description" content="10 proven strategies to increase organic traffic and grow your audience." />
<meta property="og:image" content="https://example.com/images/traffic-guide.jpg" />
<meta property="og:url" content="https://example.com/blog/boost-website-traffic" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Blog" />
<meta property="article:published_time" content="2026-02-21T00:00:00Z" />
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@exampleblog" />
<meta name="twitter:title" content="How to Boost Your Website Traffic" />
<meta name="twitter:description" content="10 proven strategies to increase organic traffic." />
<meta name="twitter:image" content="https://example.com/images/traffic-guide-twitter.jpg" />Best Practices for Maximum Engagement
Beyond the technical requirements, a few strategic choices can significantly improve your social media click-through rates:
- Write different titles for social vs. search. Your
og:titlecan be more attention-grabbing than your SEO title tag. Tailor it for the feed where people scroll quickly and need a reason to stop. - Use high-contrast images with minimal text. Images with faces, bold graphics, or vibrant colors perform better than text-heavy designs, especially on mobile where preview cards are small.
- Keep your image within the safe zone. Different platforms crop images differently. Place important elements within the center 80% of the image to ensure nothing critical gets cut off.
- Include a call to action in the description. Phrases like “Learn how,” “Discover why,” or “Get started” encourage clicks without being overly salesy.
- Set tags on every page. Do not rely on platform defaults. Even internal pages and deep links benefit from proper OG tags in case someone shares them.
- Keep descriptions updated. If your content changes, update the OG description to match. Outdated previews erode trust and reduce clicks.
- Always use HTTPS for image URLs. Most platforms now require images served over HTTPS. HTTP image URLs may be blocked or silently ignored.
Testing and Debugging Your Open Graph Tags
After adding your OG tags, you should always verify they work correctly before promoting your content. Here are the most reliable testing methods:
Platform Debuggers
- Facebook Sharing Debugger — Paste your URL to see exactly what Facebook will display. Click “Scrape Again” to clear the cache and fetch fresh tags.
- Twitter Card Validator — Preview how your link will appear in tweets and check for tag errors or missing properties.
- LinkedIn Post Inspector — Shows the preview LinkedIn will generate and lets you refresh its cache for your URL.
Using View Source
Before using the platform debuggers, do a quick sanity check: open your page in a browser, view the HTML source, and search for og: in the <head> section. Make sure all tags are present, values are not empty, and image URLs are absolute and accessible.
Common Mistakes to Avoid
Even experienced developers make these errors. Watch out for these pitfalls:
- Using relative image URLs. Social platform crawlers need absolute URLs starting with
https://. A path like/images/og.jpgwill not work. - Forgetting to clear the cache. Social platforms cache your OG data aggressively, sometimes for days or weeks. After updating tags, always use the platform debugger tools to force a re-scrape.
- Images that are too small. Facebook requires a minimum of 200 × 200 pixels, but anything below 600 × 315 will look poor. Stick to the 1200 × 630 recommendation.
- Missing the
og:urltag. Without it, platforms may create separate share counts for different URL variations of the same page, diluting your social proof. - Special characters in content values. Ensure your title and description are properly HTML-encoded. Unescaped quotes, ampersands, or angle brackets can break the meta tag entirely.
- Slow-loading or blocked images. If the crawler times out fetching your image (usually after 2-4 seconds), no image preview will appear. Optimize your images and serve them from a CDN for fast global delivery.
- Duplicating OG tags. If the same property appears multiple times, platforms may pick up the wrong value. Audit your templates to ensure each tag appears only once per page.
Generate Your Open Graph Tags in Seconds
Manually writing Open Graph and Twitter Card tags for every page is tedious and error-prone. One missed quote or wrong property name can silently break your social previews. Instead of hand-coding each property, use our free Open Graph Generator to build perfectly formatted tags in seconds. Simply fill in your title, description, image URL, and page URL, preview how it will look on each platform, and copy the generated HTML code directly into your site’s <head>.
Need to set up broader SEO metadata beyond just social tags? Our Meta Tag Generator covers standard meta tags, Open Graph, Twitter Cards, and structured data all in one place. It is the fastest way to ensure every page on your site is fully optimized for both search engines and social media sharing.
Getting your Open Graph tags right is a small investment that pays off every single time someone shares your content. With the right tags in place, your links will stand out in crowded feeds, drive more clicks, and ultimately bring more visitors to your site. Take five minutes to audit your existing pages and fill in any missing tags — the results will speak for themselves.