Search Engine Optimization (SEO)

Search Engine Optimization or simply SEO is important for modern web pages to increase searchability, discoverability and indexability. It can be a key component on the success of new platforms and services.

In next.js you can customize metadata tags and static metadata files like robots.txt or sitemap.xml per route basis. Metadata objects are inherited by all children pages and they can opt-in to override or extend the metadata from the parent.

SEO Relevant Documentation

The SEO configuration requires understanding of different standards and protocols that used to increase the searchability of a website. The most relevant to be implemented in Elevate Web are listed here:

• Open Graph: Metadata tags for the Open Graph protocol.
  • Next.js Open Graph tags
  • Protocol Documentation
• sitemape.xml: An xml file which lists the pages available in the website. This file is dynamically generated based on the routes defined in control.
  • Next.js sitemap.xml generation
• robots.txt and robots metadata tags: Used to instruct web crawlers about which pages should be indexed or not, if links should be follow and how fast it can crawl pages in the site.
  • Next.js robots.txt generation
  • Next.js robots metadata tags
  • MDN Documentation
  • Robots exclusion protocol
  • Robots.txt vs metadata tags
• Twitter: For the X social platform formerly known as Twitter. Some sites may also use them.
  • Next.js Twitter tags
  • Getting started
  • Markup cards
• Structured Data: A set of Schemas that define "types" to general usage across the web. Google use a subset of those types for enhanced search functionalities.
  • Schemas.org
  • Google structured data gallery
  • Next.js JSON-DL

Technical details

Elevate Web supports most of the metadata fields for the dynamic routes. You will need to customize some information to make the matadata relevant for your application.

The next sections include the technical details for each type of metadata.

Next.js

The relevant documentation can be found here.

Notes:

• Next.js provides typescript support, so you can use the Metadata type to keep the code strongly typed.
• The config object provides a metadataBase key. If present, it will be used across all fields that require a url as the base path, so you can use relative paths in them. more info.

Open Graph

The Open Graph standard requires 4 mandatory metadata tags. From the OG documentation:

• og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
• og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
• og:image - An image URL which should represent your object within the graph.
• og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

Sitemap

A sitemap is generated based on the route information fetched from control. Web only metadata fields will be used for things like change frequency and priority.

Robots

The usage of the robots.txt file is to provide instructions to web crawlers about how to search the page. The important aspects are as follows:

• You can customize per User Agent like GoogleBot or BingBot. Another option is to use the wildcard * for all bots.
• User Agents need to be Pascal Case according to the standard.
• The usage of Robots metadata tags is mostly to disallow bots crawling on specific pages as there is no guarantee the bot will read the robots.txt file.
  • You may want to include this on pages that require user authentication.

Twitter

Some twitter metadata tags fallback to open graph metadata tags when those are available.

Twitter		Open Graph
twitter:card	->	og:type
twitter:description	->	og:description
twitter:title	->	og:title
twitter:image	->	og:image
twitter:image:alt	->	og:image:alt

In next.js, this fallback behavior will be used to generate the appropriate twitter metadata tags from the Open Graph tags. This handy feature reduces the boilerplate. Only Twitter specific metadata tags are needed if you need to support them.

JSON-DL (Structured Data)

The recommended way to include JSON-DL in next.js is to add the content in a script tag that is added in the layout.ts or page.ts.

   <script
     type="application/ld+json"
     dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
   />

Pages that can benefit from Google's structure data need to include a script tag with the appropriate JSON content.

The identified relevant components from the structured data gallery are:

• Carousel (See Movie for more details)
• Movie
• Video

NOTE: For video types, google supports the following file formats: 3GP, 3G2, ASF, AVI, DivX, M2V, M3U, M3U8, M4V, MKV, MOV, MP4, MPEG, OGV, QVT, RAM, RM, VOB, WebM, WMV, and XAP. More info.

Metadata tags

A page or layout can provide its own custom metadata by exporting a metadata object for static metadata or by implementing a generateMetadata function for dynamic metadata.

Next.js Documentation

Working with Metadata objects

In Elevate Web a base metadata object is exported in the root layout, so all pages get default metadata tags that inherit from it.

However you can extend or override that behavior as you see fit by exporting the appropriate metadata object in the page in question.

Utility getMetadata

There is an utility getMetadata that generates a metadata object that extends from the project defaults. It accepts a metadata object as props in which you provide the keys that you want to override or add to it.

  export const metadata: Metadata = getMetadata({
    title: 'Awesome Player',
  });

The use case for this utility is to handle appropriately the openGraph, twitter and robots keys to ensure appropriate metadata tags are present. Metadata objects exported from multiple segments are shallowly merge. This means that including a single openGraph key will override all the openGraph settings from its parent. Using the getMetadata utility prevents this issue and ensures that only specific keys are overwritten or a single key is added to the base.

Dynamically generated files

Elevate Web implements a root level robots.ts and sitemap.ts files that will be used by next to create and serve static robots.txt and sitemap.xml respectively.

If you need a specific implementation for either robots or sitemap, you can put the respective static file or a new script (js/ts) for dynamic generation under the route you need them.