Meta Tags

Meta tags describe a page’s content, aiding search engines and social platforms in understanding its context.

Title

The <title> tag is a core meta tag, appearing as the page's title in search results and browser tabs. It’s crucial for SEO and click-through rates. In Next.js, the tag can be managed using the metadata configuration within the app router. By defining the title field, you can set both a default title and a custom template. For example:

export const metadata: Metadata = {
  title: {
    absolute: "My App",
    default: "My App",
    template: "%s | My App",
  },
};

• absolute: Sets the fixed title for the page.
• default: Provides a fallback title when a specific page title is not set.
• template: Allows you to create a dynamic title format, where %s is replaced by the page’s title.

However, this approach is not used in the app. Instead, a createTitle helper is implemented. This decision was made because, in practice, the layout inheritance rules for titles in Next.js were too complex and led to confusion, making the custom helper a simpler, more consistent solution.

export const metadata: Metadata = {
  title: createTitle("Pricing"),
};

This will create Pricing | My App - basically the same as the template syntax.

Description

The <meta name="description"> tag provides a summary of the page’s content. It's displayed in search engine results and social media shares, influencing SEO and engagement. The default description is set as APP_DESCRIPTION in packages/common/src/app.ts. For page-specific descriptions, override the default in the individual page components or modify the layout file apps/marketing/app/layout.tsx. Custom descriptions improve SEO relevance.

OG Image (Open Graph Image)

The Open Graph (OG) image is essential for social media sharing. It appears when the page is shared on platforms like Facebook or Twitter, attracting more user interaction. OG images are automatically generated in apps/marketing/app/og-image/route.ts. Custom OG images can be set by modifying the generator in this file to tailor the image content to specific pages.