Meta Tag Generator
HTML, Next.js, Nuxt, Astro, Gatsby — with live social card previews
Generate optimised meta tags for your website and copy them out as plain HTML, Next.js metadata, Nuxt's useSeoMeta(), Astro, Gatsby Helmet, SvelteKit, or Remix. Includes Open Graph and Twitter Card support, live previews of how the card renders on Facebook, Twitter / X, LinkedIn, and Discord, plus inline validation warnings for missing or oversized fields.
Recommended: 50–60 characters.
Recommended: 150–160 characters.
Generated codePlain HTML
<!-- Basic Meta Tags --> <meta name="robots" content="index, follow" /> <!-- Open Graph --> <meta property="og:type" content="website" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" />
Validation
Social card previews
How your link will look when shared. Updates as you edit the form above.
Related SEO tools
Meta Tag Examples
Basic Meta Tags for SEO:
<!-- Basic Meta Tags -->
<title>Best Coffee Beans - Premium Arabica Coffee | Coffee Shop</title>
<meta name="description" content="Discover our premium arabica coffee beans sourced from the finest coffee farms. Fresh roasted daily with free shipping on orders over $50." />
<meta name="author" content="Coffee Shop" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://coffeeshop.com/coffee-beans" />Essential meta tags for search engine optimization including title, description, author, keywords, robots directive, and canonical URL.
Meta Tag Reference
What each meta tag does, how it shows up in Google and on social platforms, and how to integrate the output into Next.js, Nuxt, Astro, Gatsby, SvelteKit, and Remix.
The three meta tags every page actually needs
- <title> — the headline that appears in search results, browser tabs, and most social cards as a fallback. Keep it under 60 characters; put the most important words first.
- <meta name="description">— a 150–160 character summary that controls the snippet shown under the title in Google. Doesn't directly affect ranking, but a compelling description doubles click-through rate on the same position.
- <link rel="canonical">— tells search engines the “true” URL for the page. Critical when the same content is reachable from multiple URLs (with/without trailing slash, with/without UTM parameters, paginated views, etc.).
Open Graph image specs you should know
| Property | Recommended | Notes |
|---|---|---|
| og:image dimensions | 1200 × 630 (1.91:1) | Used by Facebook, LinkedIn, Slack, and most embedders. |
| og:image format | JPG or PNG (no WebP/AVIF) | Some scrapers reject modern formats. JPG is safest for photographic cards. |
| og:image file size | Under 8 MB (Facebook), 5 MB (Twitter) | Aim for ≤ 1 MB for fast unfurling. |
| og:image:width / height | Always declare explicitly | Facebook's debugger flags missing dimensions. |
| og:image:alt | Always include | Accessibility + AI crawlers use it to describe the image. |
| twitter:card | summary_large_image | summary uses a small square thumbnail — only good for image-light content. |
Framework integration notes
Next.js (App Router)
Export metadata from a layout.tsx or page.tsx. Nested layouts inherit and can extend their parent's metadata. For dynamic metadata, export a generateMetadata() async function instead.
Next.js (Pages Router)
Import Head from next/head and place tags inside it. There is no built-in inheritance — wrap shared tags in a custom component (e.g. SiteHead).
Nuxt 3 — useSeoMeta()
Call useSeoMeta() inside <script setup> with typed property names (e.g. ogTitle, twitterCard). For link tags (canonical, favicon, manifest), use useHead({ link: [...] }).
Astro
Put meta tags directly inside <head> in your layout file. For larger projects use @astrojs/seo's <SEO> component for a higher-level API.
Gatsby — react-helmet
Install gatsby-plugin-react-helmet, import Helmet from react-helmet, and wrap tags. Gatsby 5+ projects should use react-helmet-async instead.
SvelteKit — svelte:head
Place tags inside <svelte:head> in any .svelte route or layout. Server-side render-friendly out of the box.
Remix — meta export
Export a meta function from your route file. Returns an array of meta descriptors — Remix renders them into <head> automatically.
Gotchas that hurt rankings or social cards
Duplicate or missing titles across the site
Every page needs a unique <title>. Templated titles like “Welcome to My Site” repeated on every page tank rankings and Google's “Crawled, currently not indexed” bucket fills up with them.
Putting tags outside <head>
Meta tags must live inside <head>. Tags injected by client-side JavaScript after hydration may be missed by some social crawlers (especially Slack and older clients) — server-render them where possible.
og:image URL must be absolute and public
Use a full https:// URL, not a relative path. The image must be publicly fetchable — cards on staging behind auth will show a broken thumbnail.
Cached cards on Facebook
Facebook aggressively caches the first preview it scrapes for a URL. After changing your og:image, use Facebook's Sharing Debugger to clear the cache.
Robots: noindex left on by accident
A staging-environment noindex tag promoted to production is one of the most common ways sites silently disappear from search. The validation panel in this tool warns you when noindex is set.
Frequently Asked Questions
Common questions about meta tags, Open Graph, Twitter Cards, framework integrations, and the deprecated keywords meta.