ABC Tools

Meta Tags and Open Graph, Explained

After reading this you will know which meta tags a search engine actually uses, which ones social platforms read to build a share card, and how to set the title, description, canonical, Open Graph and Twitter Card values so your page looks right in Google results and when someone pastes the link into a chat.

What these tags are and one example

Meta tags are lines in the <head> of an HTML page that describe the page to machines rather than to human readers. Search engines read some of them. Social and chat apps read a different set to build the box that appears when a link is shared, called a card.

Here is the shape of a minimal set. A page about a bread recipe might carry a <title> of No-knead bread in 4 hours, a meta description of about 150 characters, a canonical URL, and an Open Graph block naming a title, a description and a 1200 × 630 image. Paste that page URL into a chat app and you get a large photo, a bold headline and a line of gray text. Leave the Open Graph tags out and most apps fall back to a bare link with no image at all.

The important split to hold in your head: the tags Google reads and the tags share cards read overlap but are not the same. Getting one right does not get the other right.

When to use this and when it does not matter

Set meta and Open Graph tags on any page you expect people to find in search or paste into a message. That is nearly every public page. The effort is small and the payoff is a correct headline and image instead of whatever the platform guesses.

Two cases where it matters less. First, pages blocked from indexing with noindex will never show a Google snippet, so the search title and description are moot (the Open Graph card still shows if someone shares the URL). Second, internal or login-gated pages that no crawler and no chat app can reach never build a card, so the tags sit unused.

A meta description is not a ranking factor. Google has said for years that it does not use the description text to rank pages. It may use it as the snippet, and it may ignore it and synthesize a snippet from the page body instead. Write it to earn clicks, not to rank.

Which tag feeds which surface

There is no single formula here. The useful model is a routing table: each surface reads specific tags in a specific order, and falls back when a tag is missing.

Which tag each surface reads, in priority order
SurfaceTitle fromDescription fromImage from
Google result<title>meta description, or page bodypage content, not meta
Facebook, LinkedIn, WhatsAppog:titleog:descriptionog:image
X (Twitter)twitter:title then og:titletwitter:description then og:descriptiontwitter:image then og:image

Two rules fall out of this table. Google ignores your Open Graph image entirely, so a perfect share card does nothing for the search result thumbnail. And X reads Twitter Card tags first but happily uses Open Graph tags when the Twitter ones are absent, so you rarely need to duplicate every value. Set the Open Graph block, add twitter:card to pick the layout, and X fills the rest from Open Graph.

The numbers that decide layout

Two measured limits control most of what goes wrong: image dimensions and text length.

The image threshold is the one people miss. Facebook shows the large card only when the image is at least 1200 × 630 pixels. Below that it falls back to a small square thumbnail beside the text. The ratio matters too. A large card crops to about 1.91:1, so a square 1200 × 1200 image gets center-cropped and you lose the top and bottom.

\text{aspect ratio} = \frac{1200}{630} \approx 1.905

Here 1200 is the recommended width in pixels and 630 is the recommended height. Their quotient, about 1.905, is the shape the large card expects. Feed it an image close to that ratio and nothing gets cropped.

Text length controls truncation. Google renders the title in pixels, not characters, so the cutoff varies with the letters used, but a title under about 60 characters almost always survives on desktop. Descriptions run to roughly 155 to 160 characters before the ellipsis. These are display limits, not penalties: a 90-character title is legal and indexable, it just gets truncated in the result.

A worked example using the demo data

Building the card for one page

Load the tool with its defaults and you get a page whose title is 42 characters, a description of 148 characters, a canonical URL, and an Open Graph image of 1200 × 630. Walk through what each surface does with it.

  1. Google takes the 42-character title. That is under 60, so it shows in full. The 148-character description is under 160, so it shows without an ellipsis. The result thumbnail, if any, comes from page content, not from Open Graph.
  2. Facebook and LinkedIn read og:title, og:description and og:image. The image is exactly 1200 × 630, so they render the large card at ratio 1.905 with no crop.
  3. X sees twitter:card set to summary_large_image. It finds no twitter:title, so it falls back to og:title, and likewise for the description and image. The card matches Facebook's.

Every surface renders correctly from one Open Graph block plus a single Twitter Card line. That is the target state.

The demo title and description both sit under the truncation limits, so Google shows them in full.

Reading the previews without fooling yourself

The tool shows three previews. Read them as approximations, because each platform re-renders on its own schedule and with its own fonts.

Google preview
An estimate of the search snippet. Google may replace your description with text pulled from the page body when it judges that a better match for the query, so the real snippet can differ from what you wrote.
Facebook and LinkedIn card
Built from Open Graph tags. These platforms cache aggressively. If you change a tag after a URL has been shared once, the old card can persist until the platform re-scrapes, often days later.
X card
Built from Twitter Card tags with Open Graph fallback. The summary_large_image layout needs an image of at least 300 × 157 to render large, and looks best at 1200 × 630.

Use the previews to catch truncation, a wrong image ratio, or a missing tag. Do not treat them as pixel-final; for a pixel-accurate Google result on desktop and mobile, check the SERP Snippet Preview.

An image at 1200 by 630 pixels (ratio 1.905) fills the large card with no crop. Below 1200 pixels wide, the card collapses to a small square thumbnail. A square 1200 by 1200 image renders large but center-crops to 1.91:1, hiding the top and bottom 26 percent of the picture.

Common mistakes

A short list of the failures that show up most often.

  • Relying on Open Graph for the Google thumbnail. Google does not read og:image for result thumbnails. Setting it changes the share card, not the search result.
  • A relative og:image URL. Scrapers need an absolute URL such as https://example.com/img/card.png. A path like /img/card.png often fails to load.
  • Canonical pointing at the wrong URL. A canonical is a hint that consolidates duplicate URLs. Point every paginated or parameter variant at itself or at the true primary, never at the homepage by accident, or Google may drop the page you wanted indexed.
  • Image under 1200 px wide. You lose the large card and get the small square, which almost no one clicks.
  • Expecting instant card updates. Platforms cache. A changed tag can take days to appear unless you force a re-scrape through the platform's own debugger.
  • Duplicate titles across many pages. Not a penalty, but identical titles make results indistinguishable and depress clicks.

Related tools on this site

Once your tags are in place, confirm the Google side pixel by pixel with the SERP Snippet Preview, which renders the desktop and mobile result at the real font widths so you can see exactly where the title truncates.

Frequently asked questions

Does a meta description affect ranking?

No. Google has stated it does not use the meta description as a ranking signal. It may use the text as the snippet, or it may write its own snippet from the page. Write the description to earn the click, since a better snippet lifts click-through even without moving rank.

Do I need separate Twitter Card tags if I already have Open Graph?

Usually not. X reads Open Graph as a fallback for title, description and image. Add one line, twitter:card set to summary_large_image or summary, to pick the layout, and let X pull the rest from Open Graph.

Why does my updated image still show the old card?

The platform cached the first scrape. Facebook, LinkedIn and X each expose a debugger that forces a re-fetch. Run the URL through it once and the fresh tags appear.

What is the safe size for an Open Graph image?

Use 1200 × 630 pixels, a ratio of about 1.905. That triggers the large card on Facebook and LinkedIn and looks correct on X. Stay under about 5 MB so slow scrapers do not time out.

Is the canonical tag required?

Not required, but useful whenever a page is reachable at more than one URL. It tells Google which version to index and consolidates signals onto one address. Point it at the clean, preferred URL of the page itself.

Try it yourself in the tool

Related tools

SERP Snippet Preview

Pixel-accurate preview of your Google result on desktop and mobile.

Keyword Density Checker

Word and phrase frequencies of any text, with stopword filter.

Redirect Chain Checker

Follow every hop: 301s, 302s, loops and chain length.

UTM Campaign URL Builder

Build tagged campaign URLs with correct encoding.

robots.txt Tester

Test which URLs a robots.txt blocks, rule by rule.

Page Size & Request Analyzer

Page weight, request counts and the heaviest resources.