index, followOG image is missing.
<!-- 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" />Related Tools
SEO CheckerURL & HTML audit · SERP · OG · Schema
Schema Markup GeneratorJSON-LD structured data
Robots.txt GeneratorCrawl rules + sitemap
Sitemap.xml GeneratorXML sitemap creator
Hreflang Tag GeneratorInternational SEO tags
.htaccess Redirect Generator301, 302, HTTPS, www
OG Image GeneratorOpen Graph preview cards
Favicon GeneratorAll sizes + ICO + WebManifestMeta Tag Generator — SEO, Open Graph & Twitter Card
What's included
Features
About this tool
Generate Every Meta Tag Your Page Needs — With Live Previews
You shared a link and it showed a blank card on Twitter. You published a page and the title is getting cut off in Google. You're writing meta tags by hand and you're not sure whether og:title or twitter:title takes precedence, or whether your JSON-LD @type should be Article or BlogPosting. This tool generates the complete set — SEO, Open Graph, Twitter, and structured data — and shows live previews of exactly how Google, Facebook, and Twitter will render the page before you publish.
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.
Step by step
How to Use
- 1Select your page typeClick 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.
- 2Fill in your page detailsEnter 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.
- 3Set robots and additional optionsToggle the index/noindex and follow/nofollow options to control how search engines treat the page. For articles, fill in the published and modified dates to enable og:article properties and Article schema.
- 4Check the live previewsSwitch between the Google, Facebook, and Twitter tabs to see how your page will look in each context. Check for title truncation in the Google SERP preview and verify your OG image appears correctly in the social card previews.
- 5Choose your export format and copyClick the format tab that matches your stack: HTML for static sites, 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, or OG Only if your basic SEO is handled elsewhere. Click Copy and paste directly into your file.
Real-world uses
Common Use Cases
export const metadata = { ... } object directly into page.js or layout.js. All openGraph, twitter, robots, and alternates properties are correctly structured — no manual reference to the Next.js metadata API needed.Got questions?
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.