index, follow<!-- Primary Meta Tags -->
<meta name="robots" content="index, follow" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />You Might Also Like
Meta Tag Generator — SEO, Open Graph & Twitter Card
About this tool
Generate Every Meta Tag Your Page Needs — With Live Previews
Getting meta tags right is one of the easiest and highest-impact things you can do for SEO and social sharing. The right title tag brings clicks from search results. The right og:image stops thumbs from scrolling past your shared link on Facebook. The right JSON-LD schema unlocks rich results in Google. But writing all of this from scratch — and keeping it consistent across SEO, Open Graph, Twitter, and structured data — is tedious and error-prone.
This Meta Tag Generator takes your page details and generates a complete, production-ready meta tag set in one click. Fill in the title, description, URL, OG image, site name, author, and dates. Select your page type (blog post, product, homepage, article, landing page, service) and the tool automatically picks the right og:type, Twitter card type, and Schema.org @type. Toggle the robots index and follow settings with a single button.
The live preview panel shows exactly how your page will look as a Google search result (SERP snippet with domain breadcrumb, blue title, gray description), as a Facebook/LinkedIn link card (image + site name + title + description), and as a Twitter/X summary_large_image card. No more guessing whether your title will be truncated or your image will be the right ratio.
Export the result in 7 formats: plain HTML tags for any website, the Next.js App Router metadata export object, a React Helmet JSX snippet, a Vue/Nuxt useHead() composable call, an Astro <head> block, a standalone JSON-LD structured data script, or just the Open Graph and Twitter tags for projects that handle basic SEO elsewhere.
Features
- 7 page types — Blog Post, Article, Product, Homepage, About, Landing Page, Service with auto-matched og:type and Schema @type
- Live Google SERP preview — realistic search result card showing domain breadcrumb, blue title, gray description snippet
- Facebook OG card preview — shows image, uppercase domain, title, and description as Facebook renders them
- Twitter/X card preview — summary_large_image card with your actual image, title, and description
- Character counters with color coding — amber (too short), green (optimal), red (too long) for title (60) and description (160)
- 7 export formats — HTML, Next.js metadata, React Helmet, Vue/Nuxt useHead, Astro, JSON-LD, OG-only
- JSON-LD Schema generation — Article, NewsArticle, Product, WebSite, AboutPage, WebPage, Service based on page type
- Robots toggles — index/noindex and follow/nofollow toggle buttons with live robots meta content preview
- Date fields for articles — Published and Modified date inputs for Article/NewsArticle Schema and og:article properties
- One-click copy — copies the full code block for the active format with visual confirmation
How to Use
Step 1 — Select your page type
Click the page type that matches your page: Blog Post or Article for editorial content, Product for e-commerce, Homepage or Landing Page for marketing pages, About or Service for informational pages. The tool automatically sets og:type, the Schema.org @type, and shows/hides date fields based on your selection.
Step 2 — Fill in your page details Enter your page title — watch the character counter turn green when you hit the 50–60 char sweet spot. Write your meta description aiming for 130–160 characters. Add the canonical URL, OG image URL (1200×630px), site name, and Twitter handle. For blog posts and articles, add published and modified dates.
Step 3 — Check the live previews Switch between the Google, Facebook, and Twitter tabs to see how your page will look in each context. The Google tab shows the real SERP snippet. Check for truncation on the title and description. The Facebook and Twitter tabs show the social card with your actual OG image if a URL was provided.
Step 4 — Choose your export format and copy Click the format tab that matches your stack: HTML for static sites or any CMS; Next.js for App Router projects; React Helmet for CRA or Vite React; Vue / Nuxt for Vue 3 and Nuxt 3; Astro for Astro projects; JSON-LD for standalone structured data; OG Only if your basic SEO is handled elsewhere. Click ⎘ Copy and paste directly into your file.
Common Use Cases
Frequently Asked Questions
Every web page should have at minimum: a <title> tag (50–60 characters), a <meta name="description"> tag (130–160 characters), a <link rel="canonical"> pointing to the definitive URL, and a <meta name="robots"> tag. For social sharing add the Open Graph tags og:title, og:description, og:image (1200×630px), og:url, and og:type. For Twitter/X add twitter:card, twitter:title, twitter:description, and twitter:image. For search engine structured data add a JSON-LD <script> block with the appropriate Schema.org type for your page.
Google displays approximately 50–60 characters of a page title before truncating it in search results. Titles between 50 and 60 characters are shown in full on desktop. Meta descriptions should be 130–160 characters — enough to provide a complete, compelling snippet without being cut off. The tool uses a color-coded character counter: amber means the field is too short, green means it is in the optimal range, and red means it exceeds the limit and will be truncated by Google.
The <title> tag controls what appears in the browser tab and in Google search results. The og:title meta property controls what title Facebook, LinkedIn, Twitter/X, Slack, and other apps show when your page is shared as a link. They should usually match, but you can write them differently — for example the <title> might include your brand name at the end ("How to Center a Div — MyBlog") while the og:title might be more direct for social context ("How to Center a Div in CSS in 2025"). This tool generates both from the same title input but you can manually adjust either in the HTML output.
The recommended OG image size is 1200×630 pixels at a 1.91:1 aspect ratio. This size works correctly on Facebook, LinkedIn, Slack, iMessage, and WhatsApp. Twitter/X summary_large_image cards also use this size. Minimum size is 200×200px (for small card formats), but anything under 1200×630 risks looking blurry or cropped. Always use an absolute URL (starting with https://) for the og:image value — relative paths will not work when pages are shared externally. The Facebook and Twitter preview panels in this tool show a realistic representation of how your image will appear.
A canonical URL (<link rel="canonical" href="...">) tells search engines which version of a page is the "official" one when the same content is accessible at multiple URLs. For example, if your page can be reached at both https://example.com/page and https://example.com/page?ref=social, the canonical tag tells Google to consolidate ranking signals onto the clean URL. Without it, Google may split your SEO value between duplicates or pick the wrong version. Always set the canonical to the HTTPS, non-www (or www — whichever you use consistently) version of the URL without tracking parameters.
Copy the generated code from the Next.js tab and paste it into your page.js or layout.js file in a Next.js 13+ App Router project. The export const metadata = { ... } object is natively supported by Next.js App Router — no additional packages needed. Next.js automatically injects all the title, openGraph, twitter, robots, and alternates properties into the page <head> at build time. For dynamic metadata (where values depend on data fetching), convert it to export async function generateMetadata() { return { ... }; } instead.
JSON-LD (JavaScript Object Notation for Linked Data) is Google's recommended format for adding structured data to your pages. It is a <script type="application/ld+json"> block that tells Google what type of content the page contains — Article, Product, FAQ, Recipe, etc. — so it can display rich results in search (star ratings, publication dates, breadcrumbs). It does not affect regular rankings directly but can significantly improve click-through rates by enabling rich snippets. This tool generates appropriate JSON-LD Schema based on your selected page type: Article for blog posts, NewsArticle for news, Product for product pages, WebSite for homepages.
"index, follow" (the default) tells search engine crawlers to index the page and follow all links on it. "noindex" removes the page from search results entirely — useful for thank-you pages, admin pages, and staging environments. "nofollow" tells crawlers not to follow links on the page — useful if you do not want to pass link equity to outbound links. "noindex, nofollow" is the most restrictive option and is used for pages you want completely hidden from search engines. The robots toggle buttons in the form update the meta content value in real time across all export formats.
In a React project without Next.js App Router, use the react-helmet-async package: npm install react-helmet-async. Wrap your app with <HelmetProvider> in your root component, then use the <Helmet> component inside any page to inject meta tags into the document head. The React Helmet tab in this tool generates the exact JSX snippet ready to paste. For Vite React projects with SSR, react-helmet-async handles server-side rendering correctly. For non-SSR React SPAs, the meta tags are injected client-side — they will be present for social sharing crawlers that execute JavaScript (like Facebook and Twitter) but not for those that do not.
The Vue / Nuxt tab generates a useHead() composable call using @vueuse/head — the standard head management library for both Vue 3 and Nuxt 3. In Nuxt 3, useHead is auto-imported so no import statement is needed. In Vue 3 with a standalone app, install @vueuse/head: npm install @vueuse/head, then add createHead() to your app setup. The generated code covers title, canonical link, all meta tags, Open Graph properties, and Twitter Card tags in a single composable call. For page-level meta, place the useHead() call inside the <script setup> block of your page component.