SEO

SEO and Open Graph Configuration for SSK

The SSK Generator comes equipped with a handy feature to automatically generate a siteMetadata template for easy management of SEO and Open Graph data. This simplifies setting up your site's metadata, ensuring proper integration with search engines and social platforms.

---

Site Metadata Template

When using the SSK Generator, a pre-configured siteMetadata file is generated in:

apps/startupstarterkits.com/app/_constants/site-metadata.ts

This file includes instructions on how to configure SEO fields such as the title, description, and Open Graph images. The generated template ensures that you can easily modify your SEO and Open Graph settings for your site.

---

Pre-built Pages with SEO Configs

All pre-built pages, like the Privacy Policy and Terms of Service, already include their own siteMetadata configurations. You can reuse the metadata for these pages easily by importing them as follows:

export const metadata: Metadata = PrivacyPolicy.metadata

This method helps maintain consistent SEO configurations across your pre-built and custom pages.

How to Use Site Metadata

Once the siteMetadata file is generated, it can be imported and used in your layout files. Here’s an example of how you can configure the metadata in your layout component:

import siteMetadata from '_constants/site-metadata'

export const metadata = siteMetadata

This setup ensures that your entire website is configured with the appropriate SEO, Open Graph data, and structured metadata right from the layout level.

Additional Instructions

• Custom Pages: For custom pages, you can extend or modify the generated siteMetadata file by changing the title, description, or adding more SEO elements (such as robots or canonical URLs).

• SEO Best Practices: Ensure that the title and description are concise and targeted, and that Open Graph images are properly defined for social media sharing.

By using the SSK Generator, configuring SEO and Open Graph metadata becomes straightforward, ensuring your site is optimized and ready for search engines and social media platforms.

---

Using JSON-LD for Rich Results

To further enhance your site's SEO, the SSK Generator also supports JSON-LD Schema for generating Rich Result Text. This allows your site to integrate structured data that helps Google and other search engines display rich snippets in search results, improving visibility and click-through rates.

The JSON-LD schema is located in:

libs/shared/core/ui/JsonLdSchema.tsx

You can easily integrate JSON-LD by importing and using the schema in your pages or components, like this:

import JsonLdSchema from 'libs/shared/core/ui/JsonLdSchema'

const pageMetadata = {
  '@context': 'https://schema.org',
  '@type': 'WebPage',
  name: 'Page Title',
  description: 'Description of the page content',
}

<JsonLdSchema data={pageMetadata} />

This integration helps your content stand out on search engine results pages (SERPs) and enhances the visibility of your site across various platforms.