SEO Tools
Five essential on-page and technical SEO tools in one place — generate meta tags, preview social shares, configure crawlers, and build XML sitemaps.
Generate HTML meta tags for SEO, Open Graph, and Twitter Cards.
Meta Tag Generator
Generate SEO and social media meta tags
0 characters
Recommended: 1200x630px
<meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image">
SEO Boost: Meta tags help search engines understand your content and improve how your site appears in search results and social media shares. Include OpenGraph and Twitter Card tags for better social media previews.
Essential Meta Tags Reference
Meta tags go inside the <head> of your HTML and communicate page metadata to search engines and social platforms. They don't appear visibly on the page but directly affect how your content is indexed and displayed in search results and social shares.
| Tag | Purpose | Max length |
|---|---|---|
| <title> | Page title shown in browser tab and Google search results | 60 chars |
| meta description | Summary shown under the title in search results | 155–160 chars |
| og:title | Title shown when page is shared on social media | 60–90 chars |
| og:description | Description shown in social media link previews | 200 chars |
| og:image | Image shown in social media link previews | 1200×630px recommended |
| og:url | Canonical URL of the page for social sharing | Full URL |
| twitter:card | Twitter card type: summary, summary_large_image, app, player | Keyword value |
| canonical | Tells search engines the preferred URL for duplicate content | Full URL |
| robots | Crawling instructions: index/noindex, follow/nofollow | Directive keywords |
Minimum Viable Head for SEO
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Page Title — Site Name</title> <meta name="description" content="150–160 char description." /> <link rel="canonical" href="https://yoursite.com/this-page" /> <!-- Open Graph --> <meta property="og:type" content="website" /> <meta property="og:title" content="Page Title" /> <meta property="og:description" content="Description for social shares." /> <meta property="og:image" content="https://yoursite.com/og.jpg" /> <meta property="og:url" content="https://yoursite.com/this-page" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Page Title" /> <meta name="twitter:description" content="Description for Twitter." /> <meta name="twitter:image" content="https://yoursite.com/og.jpg" /> </head>
Meta Tags in Next.js App Router
Next.js App Router handles meta tags through the Metadata API — no raw HTML needed. Export a metadata object or a generateMetadata function from any layout.tsx or page.tsx.
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
alternates: { canonical: `https://yoursite.com/blog/${params.slug}` },
openGraph: {
title: post.title,
description: post.excerpt,
images: [{ url: post.coverImage, width: 1200, height: 630 }],
},
};
}layout.tsx metadata
Applies to all pages in the segment. Use for site-wide defaults like og:type, twitter:card, and site name suffix.
page.tsx metadata
Overrides layout metadata for a specific route. Use for page-specific title, description, and og:image.
generateMetadata()
Async function — can fetch data (CMS, database) to build metadata dynamically. Cached by Next.js automatically.
All SEO Tools
Frequently Asked Questions
Common questions about SEO Tools