Skip to main content

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 for 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 are used to increase the searchability of a website. The most relevant to be implemented in Assemble Web are listed here:

Technical details​

Assemble Web supports most of the metadata fields for the dynamic routes. You will need to customize some information to make the metadata 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​

The sitemap publishes concrete public detail routes discovered through Control. It rejects Home, browse routes, route templates, and private or technical paths. It returns an empty valid result when no concrete details are available rather than inventing catalogue URLs. Do not fabricate lastModified; Google ignores sitemap changeFrequency 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.
  • Prefer the wildcard rule when every crawler receives the same policy.
  • Use robots metadata to control indexing of HTML pages. The page must remain crawlable for a crawler to read noindex; do not also block that HTML path in robots.txt.
  • Authentication and authorization protect private data. Robots directives are not security controls.

Twitter​

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

TwitterOpen 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-LD (Structured Data)​

Add JSON-LD as a native script in the eligible page or layout. Escape < in serialized provider-controlled data so a value cannot terminate the script tag.

export const StructuredData = () => (
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{
      __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
    }}
  />
);

Only pages that satisfy the applicable search-engine eligibility requirements should include the script. Schema.org validity does not guarantee a Google rich result.

The identified relevant components from the structured data gallery are:

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 Assemble 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 a 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 appropriately handle the openGraph, twitter and robots keys to ensure appropriate metadata tags are present. Metadata objects exported from multiple segments are shallowly merged. 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

Assemble 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 where you need them.