SEO with MDX: Adding Meta Tags, Social Previews, and Dynamic Routes

Introduction

SEO (Search Engine Optimization) is essential for making your MDX-based Next.js blog discoverable on search engines and social platforms. This guide covers adding meta tags, social preview images, and dynamic routes for improved SEO.

1. Adding Meta Tags in MDX Pages
- Example: Meta Tags in a Blog Post
2. Adding Social Media Preview Tags
- Example: Adding Open Graph & Twitter Meta Tags
3. Dynamic Routes for SEO-Friendly URLs
- Example: Setting Up Dynamic Routes in pages/blog/[slug].tsx
4. Generating an SEO Sitemap
- Example: Automatically Generating a Sitemap
Conclusion
- Key Takeaways:
Support
License

1. Adding Meta Tags in MDX Pages

Meta tags help search engines understand your page's content. Next.js provides a built-in next/head component for adding metadata dynamically.

Example: Meta Tags in a Blog Post

import Head from 'next/head';

export default function BlogPost({ frontmatter }) {
  return (
    <>
      <Head>
        <title>{frontmatter.title} | My Blog</title>
        <meta name="description" content={frontmatter.summary} />
        <meta name="keywords" content={frontmatter.tags.join(', ')} />
      </Head>
      <article>
        <h1>{frontmatter.title}</h1>
      </article>
    </>
  );
}

🔹 Benefit: Optimizes pages for search engine indexing.

Open Graph (OG) tags improve how your content appears when shared on platforms like Twitter, Facebook, and LinkedIn.

Example: Adding Open Graph & Twitter Meta Tags

<Head>
  {/* Open Graph (Facebook, LinkedIn) */}
  <meta property="og:title" content={frontmatter.title} />
  <meta property="og:description" content={frontmatter.summary} />
  <meta property="og:image" content={frontmatter.image} />
  <meta property="og:type" content="article" />

  {/* Twitter Card */}
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={frontmatter.title} />
  <meta name="twitter:description" content={frontmatter.summary} />
  <meta name="twitter:image" content={frontmatter.image} />
</Head>

🔹 Benefit: Enhances visibility when shared on social platforms.

3. Dynamic Routes for SEO-Friendly URLs

Use dynamic routing to generate SEO-friendly URLs for MDX blog posts.

Example: Setting Up Dynamic Routes in `pages/blog/[slug].tsx`

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import MDXRemote from 'next-mdx-remote';
import Head from 'next/head';

export default function BlogPost({ source, frontmatter }) {
  return (
    <>
      <Head>
        <title>{frontmatter.title}</title>
      </Head>
      <article>
        <h1>{frontmatter.title}</h1>
        <MDXRemote {...source} />
      </article>
    </>
  );
}

export async function getStaticPaths() {
  const files = fs.readdirSync(path.join('posts'));
  const paths = files.map((filename) => ({
    params: { slug: filename.replace('.mdx', '') },
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const filePath = path.join('posts', `${params.slug}.mdx`);
  const mdxFile = fs.readFileSync(filePath, 'utf-8');
  const { content, data } = matter(mdxFile);

  return { props: { source: content, frontmatter: data } };
}

🔹 Benefit: Generates SEO-friendly URLs like /blog/seo-mdx-tips instead of query parameters.

4. Generating an SEO Sitemap

A sitemap.xml helps search engines crawl your site efficiently.

Example: Automatically Generating a Sitemap

Create a pages/sitemap.xml.js file:

import fs from 'fs';
import path from 'path';

export async function getServerSideProps({ res }) {
  const files = fs.readdirSync(path.join('posts'));
  const urls = files.map((filename) => `/blog/${filename.replace('.mdx', '')}`);
  
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${urls.map((url) => `<url><loc>https://yourdomain.com${url}</loc></url>`).join('')}
    </urlset>`;

  res.setHeader('Content-Type', 'text/xml');
  res.write(sitemap);
  res.end();
  return { props: {} };
}

export default function Sitemap() {
  return null;
}

🔹 Benefit: Improves Google SEO by enabling efficient crawling.

Conclusion

By implementing meta tags, social previews, and dynamic routes, you enhance your MDX-powered Next.js blog’s visibility and search rankings.

Key Takeaways:

✅ Use meta tags for better indexing.
✅ Implement Open Graph & Twitter Cards for improved social sharing.
✅ Create SEO-friendly dynamic routes for blog posts.
✅ Generate a sitemap for search engine optimization.

Support

If you found this guide helpful, consider sharing it with your network!

License

MIT