🎉 75% of content is free forever — Unlock Premium from $10/mo →
CW
NEWSLIVESearch All Content
đŸ’ŧ Servicesâ„šī¸ Aboutâœ‰ī¸ ContactView Pricing Plansfrom $10

SEO Optimization

Next.js SEOđŸŸĸ Free Lesson

Advertisement

SEO Optimization

Metadata API, Open Graph, sitemaps, robots.txt, and structured data.

Overview

Next.js provides built-in SEO optimization features.

Key Concepts

  • Metadata API — Export metadata objects or functions
  • Open Graph — Social media sharing optimization
  • Sitemaps — XML sitemaps for search engines
  • Robots.txt — Control crawler access
  • Structured Data — JSON-LD for rich snippets

Code Examples

// app/layout.js
export const metadata = {
  title: 'My App',
  description: 'My awesome Next.js app',
  openGraph: {
    title: 'My App',
    description: 'My awesome Next.js app',
    images: ['/og-image.png']
  }
};

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage]
    }
  };
}

// app/sitemap.js
export default function sitemap() {
  return [
    { url: 'https://example.com', lastModified: new Date() },
    { url: 'https://example.com/about', lastModified: new Date() },
    { url: 'https://example.com/blog', lastModified: new Date() }
  ];
}

// app/robots.js
export default function robots() {
  return {
    rules: [
      { userAgent: '*', allow: '/', disallow: '/admin' }
    ],
    sitemap: 'https://example.com/sitemap.xml'
  };
}

// Structured data
function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    author: { '@type': 'Person', name: post.author }
  };

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <article>{post.content}</article>
    </>
  );
}

Practice

Implement comprehensive SEO with metadata, sitemaps, and structured data.

—
☆☆☆☆☆
0 ratings

Rate & Feedback

Related Tutorials

Content with similar topics across other courses

Continue Learning

Suggested next tutorials based on this topic

Need Expert Next.js Help?

Get personalized tutoring, project support, or professional consulting.

Advertisement