While you can use code to change the behavior of your Stackbit site, every Stackbit theme comes with the same production-ready SEO capabilities. Here's a brief look at how a theme delivers editable SEO meta tags.

The links to code shared in this guide reference a specific point in time for the Starter theme. This ensures the links remain helpful. See stackbit-themes/starter-nextjs-theme on GitHub for the current theme code.

Global Editable Default SEO

Themes allow for a default set of SEO tags to act as fallbacks when page-specific tags are not set. Although typically more generic, this ensures a richer experience when links to your site are shared on social media or appear in web search results.

These tags include:

  • Title Suffix: Text appended to individual page titles by default, ensuring your site name appears in all search results and rich social previews.
  • Image: A fallback image when no page-specific image is shared.
  • Additional Tags: Other global meta tag fallbacks that editors can optionally set. See Additional SEO Meta Tags below for more information.

These values are unset by default. When set by a site editor, they are stored in content/data/config.json.

This data file includes site-wide configuration values, including header and footer settings, nav menus, and the favicon. The structure of the config file is governed by the Config model, a single instance model.

The Config model makes three fields available for global SEO:

  • titleSuffix
  • defaultSocialImage
  • defaultMetaTags (see below)

Additional SEO Meta Tags

The options available for additional meta tags are controlled by the MetaTag model. This includes a property field for the type of tag, and a content field for the value (of the content attribute in the HTML tag).

Page-Specific SEO Values

For page-specific SEO tags, themes come with an Seo model that can be shared across all page models.

Page-level SEO values override the default values when there is a conflict.

SEO Model Fields

This model has five fields:

  • metaTitle: An optional override of the page title. This gets set as the <title> and og:title tags.
  • metaDescription: A description of the page.
  • addTitleSuffix: A means of not appending the global title suffix (explained above) to the page title. This is true by default.
  • socialImage: An image for the page. This value appears as the og:image content.
  • metaTags: A list of additional tags an editor can set. See the section above to learn more about additional SEO meta tags.

These fields will appear in an SEO group on any other model to which they are included.

Adding SEO Model to Pages

Page models include the SEO group of fields by extending the Seo model. Learn more about extending models.

name: PageLayout
extends:
  - Seo
# ...

Rendering SEO Tags

Page layouts are typically wrapped in a shared BaseLayout component.

export default function PageLayout(props) {
  // ...
  return (
    <BaseLayout page={page} site={site}>
      {/* ... */}
    </BaseLayout>
  )
}

The base layout component is responsible for rendering the SEO tags, which it does using a series of utility functions found in src/utils/seo-utils.js.

Accessing the Current URL

The og:image meta tag requires the site's base URL to render properly (it must be an absolute URL, and image files live locally in the repo). This value is obtained from the URL environment variable set for the page, which is controlled from the Sourcebit config file. (Sourcebit is an open-source tool for loading data into your site. Learn more about Sourcebit.)

Sourcebit uses a utility method to set environment variables. This method is found in src/utils/page-utils.js. This method uses the URL environment variable (from process.env), which is set by Netlify.