Learn how to optimize your Indie Kit application for search engines using Next.js metadata and JSON-LD

SEO Best Practices 🔍

Indie Kit comes with built-in SEO optimization features that help your application rank better in search engines. This guide covers how to effectively use Next.js metadata and JSON-LD structured data.

Metadata Configuration 📝

Next.js provides a powerful metadata API that helps you manage SEO-related tags. Here's how to use it effectively:

import { Metadata } from "next";
import { appConfig } from "@/lib/config";
 
export const metadata: Metadata = {
  // Basic metadata
  title: `About Us | ${appConfig.projectName}`,
  description: "Learn more about our company, mission, and values.",
  keywords: ["about", "company", "mission", "values"],
  
  // Open Graph metadata for social sharing
  openGraph: {
    title: `About Us | ${appConfig.projectName}`,
    description: "Learn more about our company, mission, and values.",
    type: "website",
    url: `${process.env.NEXT_PUBLIC_APP_URL}/about`,
    siteName: appConfig.projectName,
    images: [
      {
        url: `${process.env.NEXT_PUBLIC_APP_URL}/images/og.png`,
        width: 1200,
        height: 630,
        alt: "About Us",
      },
    ],
  },
  
  // Twitter card metadata
  twitter: {
    card: "summary_large_image",
    title: `About Us | ${appConfig.projectName}`,
    description: "Learn more about our company, mission, and values.",
    images: [`${process.env.NEXT_PUBLIC_APP_URL}/images/og.png`],
  },
  
  // Canonical URL
  alternates: {
    canonical: `${process.env.NEXT_PUBLIC_APP_URL}/about`,
  },
};

JSON-LD Structured Data 🏷️

JSON-LD helps search engines better understand your content. Indie Kit uses next-seo for structured data:

import { WebPageJsonLd } from "next-seo";
 
export default function AboutPage() {
  return (
    <>
      <WebPageJsonLd
        useAppDir
        id={`${process.env.NEXT_PUBLIC_APP_URL}/about`}
        description="Learn more about our company, mission, and values."
        title={`About Us | ${appConfig.projectName}`}
        isAccessibleForFree={true}
        publisher={{
          "@type": "Organization",
          name: appConfig.projectName,
          url: process.env.NEXT_PUBLIC_APP_URL,
        }}
      />
      {/* Page content */}
    </>
  );
}

Sitemap Generation 🗺️

Add pages to your sitemap in app/sitemap.ts:

import { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://yourdomain.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://yourdomain.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    // Add more URLs
  ]
}

Best Practices 💡

Metadata
- Use descriptive titles and descriptions
- Keep titles under 60 characters
- Write descriptions between 150-160 characters
- Include relevant keywords naturally
Images
- Always provide alt text
- Use descriptive filenames
- Optimize image sizes
- Specify image dimensions
URLs
- Use clean, descriptive URLs
- Include canonical URLs
- Implement proper redirects
- Handle trailing slashes consistently
Performance
- Optimize loading speed
- Use responsive images
- Implement lazy loading
- Enable caching
Mobile
- Ensure mobile responsiveness
- Use appropriate font sizes
- Maintain tap target sizes
- Test on multiple devices
Content
- Use semantic HTML
- Structure content with headings
- Include internal links
- Keep content fresh and relevant

Common Schemas 📊

Here are some commonly used JSON-LD schemas:

// Article
<ArticleJsonLd
  useAppDir
  type="Article"
  url={`${process.env.NEXT_PUBLIC_APP_URL}/blog/post-slug`}
  title="Article Title"
  images={[`${process.env.NEXT_PUBLIC_APP_URL}/images/article.jpg`]}
  datePublished="2024-01-01T08:00:00+08:00"
  dateModified="2024-01-01T09:00:00+08:00"
  authorName="Author Name"
  description="Article description"
/>
 
// Product
<ProductJsonLd
  useAppDir
  productName="Product Name"
  images={[`${process.env.NEXT_PUBLIC_APP_URL}/images/product.jpg`]}
  description="Product description"
  brand="Brand Name"
  offers={[
    {
      price: '99.99',
      priceCurrency: 'USD',
      availability: 'https://schema.org/InStock',
    },
  ]}
/>
 
// FAQ
<FAQPageJsonLd
  useAppDir
  mainEntity={[
    {
      questionName: 'What is your return policy?',
      acceptedAnswerText: 'We accept returns within 30 days of purchase.',
    },
  ]}
/>

Testing Tools 🛠️

Google Search Console
- Submit your sitemap
- Monitor indexing status
- Check mobile usability
- Track search performance
Google's Rich Results Test
- Validate structured data
- Preview rich snippets
- Debug schema issues
Meta Tags Validators
- Test Open Graph tags
- Verify Twitter cards
- Check social previews
Detailed SEO Extension
- Quick SEO audits in Chrome
- Check meta tags and headers
- Analyze structured data
- View social media previews
- Inspect robots.txt and sitemap
- Monitor page load times
- Check SSL certificates
- Analyze page content and keywords

Remember to regularly audit your SEO implementation and keep up with search engine guidelines and best practices! 🚀

SEO Best Practices