Content
Preview
Google result
Social card
no og:image
Meta tags
Write your meta tags and Open Graph markup and watch a preview of the Google result and the social card update as you type. The output contains only tags that search engines and social platforms still read. Set og:type to website, article, product or profile, and tick Add noindex, nofollow for pages that should stay out of search.
The title is a ranking factor and the description is not. However, the description is what earns the click, and Google rewrites it when a passage from the page fits the query better. The counters flag a title over 60 characters and a description over 155.
Tells search engines which URL is the main one when the same content is reachable several ways. Use it when tracking parameters or sort options create duplicate URLs.
Always give og:image an absolute URL. Crawlers do not resolve relative paths, which is the most common reason a card shows no image. Use 1200x630 and keep the file under 5 MB.
Set summary_large_image and X reads the title, description and image from your og: tags. You do not need a parallel set of twitter: tags.
Google has ignored <meta name="keywords">
since 2009 and said so publicly. Filling it in adds bytes and
signals outdated SEO advice to anyone reading your source. The
same goes for revisit-after,
distribution and the various author meta tags that
search engines do not read.
The generator outputs this short list on purpose. Rich results come from structured data in a JSON-LD script (the markup search engines read for ratings, FAQs and breadcrumbs), which this page does not generate.
Slack, LinkedIn and Facebook cache the crawl, so the card you see
is often the one from the first time anyone shared the URL.
Force a re-fetch after every change. Facebook's
Sharing Debugger and LinkedIn's Post Inspector both do this, and
adding a query string such as ?v=2 to the image URL
gets you a fresh fetch while you iterate.
The preview above is an approximation. Fonts, truncation points and the exact crop differ between platforms. Google also measures pixels instead of characters, so a title in capitals gets cut earlier than the counter suggests.
<title>Fix JSON.parse Errors: Every Cause</title>
<meta name="description" content="Every JSON.parse SyntaxError explained, with the fix for trailing commas, single quotes, BOM and double-encoded JSON.">
<link rel="canonical" href="https://example.com/blog/fix-json-parse">
<meta property="og:type" content="article">
<meta property="og:title" content="Fix JSON.parse Errors: Every Cause">
<meta property="og:description" content="Every JSON.parse SyntaxError explained.">
<meta property="og:url" content="https://example.com/blog/fix-json-parse">
<meta property="og:image" content="https://example.com/og/json.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<!-- Twitter falls back to the og: tags, so that is the only
twitter: tag you need. -->---
// src/components/Seo.astro
const { title, description, image = "/og-default.jpg" } = Astro.props;
const canonical = new URL(Astro.url.pathname, Astro.site).href;
const imageUrl = new URL(image, Astro.site).href; // absolute, always
---
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonical} />
<meta property="og:image" content={imageUrl} />
<meta name="twitter:card" content="summary_large_image" />Build the absolute URL in one place. That prevents the most common Open Graph bug, a relative og:image that crawlers cannot resolve.
# What is in the HTML before JavaScript runs?
curl -s https://example.com/page | grep -E '<(title|meta|link rel="canonical")'
# Force the platforms to re-fetch, because they cache hard:
# Facebook: developers.facebook.com/tools/debug/
# LinkedIn: linkedin.com/post-inspector/
# Google: Search Console URL Inspection
# If the tags are added client-side by a framework, most
# crawlers will not see them at all. Render them on the server.Facebook published Open Graph in 2010, and it became the de facto standard because other platforms adopted it instead of inventing their own. Slack, Discord, WhatsApp, iMessage, LinkedIn and X all read og: tags. That is why the twitter: namespace now needs only one tag, twitter:card.
This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.
Title, meta description and canonical for search. og:title, og:description, og:image and og:url for links shared into Facebook, LinkedIn, WhatsApp or Slack. X (Twitter) falls back to the og: tags, so you only need twitter:card on top of them.
Google truncates titles around 60 characters and descriptions around 155. However, it measures pixels, not characters, so a line full of capitals gets cut earlier. The counters here turn amber near each limit and red past it.
Use 1200x630, the 1.91:1 ratio the major platforms crop to. Below 600x315 some services do not show a large image at all. Always give an absolute URL, because crawlers do not resolve relative paths.
No. Google stopped using it for ranking in 2009. It does affect click-through rate, and Google rewrites it when a passage from the page fits the query better.
No. Google has ignored it since 2009 and says so publicly. It adds bytes to every page and signals outdated SEO advice to anyone reading your source.
The platforms cache the first crawl of a URL. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-fetch, and add a query string such as ?v=2 to the image URL while you iterate.
Use article for a blog post, news story or any page with a publish date, and website for a home page, landing page or tool. Choose product for a single product page and profile for a page about one person. The value mainly affects how Facebook and LinkedIn classify the share. If you are unsure, website is always valid.
Tick Add noindex, nofollow for pages that should not appear in search: thank-you pages, internal search results, staging copies, login screens. The tool adds <meta name="robots" content="noindex, nofollow"> to the output. Leave it unticked for every page you want ranked, because one copied tag is enough to drop the page out of Google's index.
The icon tags for the same head element come from the favicon generator. The word counter checks the length of longer copy, and the slug generator builds the URL path.