Set Up Perfect Meta Tags for Next.js

Intermediate10 minutes7 steps

Generate and implement perfect meta tags, Open Graph, and Twitter cards for your Next.js application.

What You Need

A Next.js project
Basic knowledge of Next.js App Router
An OG image (1200x630px)

Open the Meta Tag Generator

Go to OnlineTools4Free Meta Tag Generator.

Fill In Your Page Details

Enter your page title (50-60 characters), description (150-160 characters), URL, and site name. These are the most important fields for SEO.

Write your title as: Primary Keyword — Secondary Keyword | Brand Name. Keep descriptions action-oriented and include your main keyword.

Configure Open Graph Tags

Set the OG type (usually "website" for homepage, "article" for blog posts), OG image URL (1200x630px recommended), and locale.

Set Up Twitter Card Tags

Choose "summary_large_image" for pages with a prominent image, or "summary" for a smaller thumbnail. Add your Twitter handle.

Generate the Tags

Click "Generate" to create all the meta tags. Copy the generated code.

Implement in Next.js

In Next.js App Router, use the Metadata API in your layout.tsx or page.tsx. Export a metadata object or generateMetadata function with the title, description, openGraph, and twitter properties.

Use generateMetadata for dynamic pages where meta tags depend on data (blog posts, product pages).

Verify with OG Checker

After deploying, use the OG Checker to verify your tags render correctly on social media platforms.

Ready to Try It?

Open the tool and follow the steps above. It is free, private, and works in your browser.

Try It Now

Frequently Asked Questions

What meta tags are most important for SEO?

Title tag and meta description are the most impactful. Open Graph tags are critical for social media sharing.

What size should OG images be?

1200x630 pixels is the recommended size. It works well on Facebook, Twitter, LinkedIn, and Slack.

Should I use generateMetadata or static metadata?

Use static metadata exports for pages with fixed content. Use generateMetadata for dynamic pages that fetch data.

How do I test my meta tags?

Use the OnlineTools4Free OG Checker, Facebook Sharing Debugger, and Twitter Card Validator to preview how your page appears when shared.

Do meta tags affect Google rankings?

The title tag directly affects rankings. Meta description does not affect rankings but influences click-through rates in search results.

Related Tutorials

Advanced10 minutes

Generate Schema Markup for Google Rich Results

Beginner5 minutes

Generate All Favicon Sizes for Your Website

Intermediate10 minutes

Build a Complete Color Scheme for Your Website