SEO Guide

Optimize your ZapStart application for search engines

On this page

Overview

ZapStart includes powerful SEO utilities to help your application rank better in search engines. These utilities are divided into two main categories:

  1. Page Metadata - Define titles, descriptions, and other metadata for individual pages
  2. Structured Data Schemas - Generate JSON-LD structured data for rich search results

All SEO utilities are available in the @/libs/seo directory. No additional packages are required.

Page Metadata

Next.js provides a metadata API that ZapStart extends with the createMetadata function. This function simplifies setting up consistent metadata across your application.

Using createMetadata

The createMetadata function creates necessary metadata for a page including titles, descriptions, Open Graph tags, Twitter cards, and canonical URLs.

make sure to check the frontend/libs/seo/metadata.js file for detailed documentation on how to use the function.

createMetadata function makes it simple to set up metadata for your pages, an example is shown below:

// in your page.js file (for example in app/blog/page.js)
import { createMetadata } from "@/libs/seo";

export const metadata = createMetadata({
  title: "Page Title | Site Name",
  description: "A detailed description of the page content.",
  canonicalPathRelative: '/path/to/page',
  // other parameters can be added as needed or they all set to default values
});

We've set up the metadata for almost all of the pages in the app to give you example of how to use the function, you only need to modify the tilte and description to fit your needs, for example visit frontend/app/blog/page.js to see how we set up the metadata for the main blog page. For a more complex example visit frontend/app/blog/[slug]/page.js to see how we set up the metadata for the blog posts (but don't worry you don't need to change anything).

Structured Data

Structured data helps search engines understand your content better and can lead to rich results in search listings. ZapStart includes several JSON-LD schema generators in the frontend/libs/seo/schemas.js file, like generateArticleSchema for blog posts.

Make sure to check the docs in frontend/libs/seo/schemas.js for more information on how to use the schema generators.

You can find an example of how to use the generateArticleSchema in the blog post page, frontend/app/blog/[slug]/page.js, it's already set up so you don't need to worry about changing anything in that file.

Always ensure the structured data accurately represents your content. Misleading structured data can lead to penalties from search engines.

Best Practices

  • Use unique titles and descriptions for every page
  • Include primary keywords in titles and descriptions naturally
  • Set canonical URLs to prevent duplicate content issues
  • Add your root url (https://zapstart.co) to the frontend/next-sitemap.config.js file to the siteUrl property
  • Use the appropriate schema for each page type (Article for blog posts, Product for product pages, etc.)
  • Get your domain verified in Google Search Console and check Google Search Console regularly for any issues
  • Blogs plays an important role in SEO, so check out the Blogs Tutorial to learn how to set up a blog for your application.
  • Test your structured data using Google's Rich Results Test
  • Don't be perfect with your SEO, if it's going to delay your product launch, just launch and start getting traffic and work on SEO along the way.

By consistently using ZapStart's SEO utilities across your application, you'll create a solid foundation for search engine optimization that can be further enhanced with content-specific strategies.

Back to DocumentationBack to top