Last updated

seo

Use the seo options to control the contents of your project's HTML <head> element. All of the seo options can be overwritten for individual pages in the front matter of markdown and tsx files.

The seo option also supports page-level configuration using front matter.

Options

OptionTypeDescription
descriptionstringSets the contents of the <meta name="description"> tag. The description can be up to 150 characters long. This text may be used in search engine results pages. Adds the same value to og:description and twitter:description parameters. To change the description in the social media preview, you can override the parameters using og:description or twitter:description specified in meta option.
imagestringSets the image with extended metadata (og:image, twitter:image) used when sharing links to your project on social networks. You must specify the path to an existing image in your project project. In addition, you can replace the image for Twitter or other social networks separately with og:image or twitter:image at is specified in the meta option.
jsonLdJSONConfigures JSON-LD parameters.
keywordsstring | [string]Sets the contents of the <meta name="keywords"> tag.
langstringSets the language attribute to indicate the language in which the content is written. Provide the lang value as a language tag with optional subtags (for example, en-US for United States English, es for Spanish). Consult the W3.org guide and the language subtag registry for more information about language tags and subtags.
meta[Meta object]Array of additional meta tags.

siteUrl

string

Sets the base URL for canonical links. When this option is configured, it automatically adds rel="canonical" to the head of all HTML pages. This option is required to generate a sitemap, see more information about how to add a sitemap.

This option should not be used in front matter.

titlestringSets the default contents of the <title> tag. This title is used in search engine results pages, and when sharing links to your project on social media. To change the preview of social networks, you can override usingog:description or twitter:description in the specified meta option.

Meta object

OptionTypeDescription
namestringMeta tag name property
contentstringMeta tag content property

Examples

The following is an example of setting default values for all pages in the configuration file.

seo:
  title: Example Developer Portal
  description: Learn how to work with Example APIs
  siteUrl: https://www.example.com
  image: ./images/example-portal-home.png
  keywords: 'documentation, api, portal'
  lang: en-US
  jsonLd:
    '@context': 'https://schema.org'
    '@type': 'Organization'
    url: 'http://www.example.com'
    name: My website
    contactPoint:
      '@type': 'ContactPoint'
      telephone: '+1111111111111'
      contactType: 'Customer service'
  meta:
    - name: twitter:image
      content: ./images/twitter-image.png
    - name: twitter:description
      content: 'Overridden description for Twitter'

The following example shows how to override the title and description in the front matter of a specific Markdown page.

---
seo:
  title: Apricot Trees
  description: Harvest apricots in the summer.
---

# Apricots

This page is about apricots.

The following example shows how to override the title and description in the front matter of a specific React page.

export const frontmatter = {
  seo: {
    title: 'Example Developer Portal',
    description: 'Learn how to work with Example APIs',
  },
};

Resources

 
Next page