The Complete Guide to Meta Tags and Open Graph (2024)
When you paste a URL into a Slack channel, a Discord server, or a Twitter post, a beautiful "rich card" usually appears containing an image, a bold title, and a brief description.
This isn't magic; it is powered by hidden lines of code in your website's <head> section known as Meta Tags and the Open Graph Protocol. If your website lacks these tags, your shared links will look like spammy, bare URLs, resulting in drastically lower click-through rates (CTR).
What is the Open Graph Protocol?
Originally created by Facebook in 2010, the Open Graph (OG) protocol was designed to allow any webpage to have the same rich functionality as a native Facebook object. Today, nearly every major platform—including LinkedIn, Twitter (X), iMessage, and Discord—reads Open Graph tags to generate link previews.
The core tags required for a functioning rich card are:
og:title- The bold title of your page.og:description- A 1-2 sentence summary of the content.og:image- The URL of the image you want to display in the card.og:site_name- The overarching name of your brand or website.
Optimal Image Sizes & Aspect Ratios
The most common mistake web developers make is using a square image (1:1) or an image that is too small for their og:image. If the image doesn't meet the platform's requirements, the social network will aggressively crop it or shrink it into a tiny thumbnail, killing your engagement.
Our tool includes a Smart Aspect Ratio Checker. If you upload an image that isn't formatted correctly, it will throw a warning. The universal safe zone for Open Graph images is 1200x630 pixels (a 1.91:1 ratio).
Twitter Cards: Summary vs. Summary_Large_Image
Twitter (X) handles link previews slightly differently. They use their own proprietary tags (e.g., twitter:card). The biggest mistake marketers make is leaving this tag set to the default summary.
A summary card forces your beautiful 1200x630 image to be aggressively cropped into a tiny square thumbnail aligned to the left of your text. By changing this tag to summary_large_image, Twitter will display a massive, full-width billboard image that takes up significant screen real estate. Use the toggle in our tool's Twitter tab to see this dramatic difference in real-time.
The Discord & Slack Ecosystem (Dark Mode)
Many modern SaaS tools, web3 projects, and gaming startups don't get their primary traffic from Facebook—they get it from Discord and Slack.
These developer-centric platforms almost exclusively run in Dark Mode. If your Open Graph image is a transparent PNG with black text, it will completely disappear against Discord's dark gray background (#313338). Our tool is one of the only previewers on the internet that allows you to toggle a true Dark Mode and view a native Discord Rich Embed mockup.
Avoiding Google Truncation & Managing SEO Health
While Open Graph tags control social media, your standard <title> and <meta name="description"> tags control how you appear in Google Search Results.
Google only provides a limited amount of pixel width for your text. If you write a title or description that is too long, Google will cut it off and replace the end with an ellipsis (...), ruining the impact of your copywriting.
To fix this, we built a Live SEO Health Score into the dashboard. It gamifies your copywriting by checking:
- SEO Title Limit: Ensures your title is between 30 and 60 characters.
- Meta Description Limit: Ensures your description is between 120 and 155 characters.
- Favicon Presence: Google Search results now prominently feature your website's Favicon next to the URL. Our tool lets you upload a local favicon to ensure your branding is perfect.
Exporting Metadata for Next.js App Router
If you are building a modern React application using the Next.js App Router (Next.js 13+), you no longer write HTML meta tags manually in a _document.js file. Instead, Next.js relies on a Javascript configuration object.
Our tool features a Developer Export engine specifically for this. Simply toggle the code export block from "HTML Tags" to "Next.js App Router". We will automatically format your inputs into the exact export const metadata = { ... } object required by Next.js, ready for you to copy and paste at the top of your `page.js` or `layout.js` files.