Choose a version:

getSeoMeta

Generate a Remix meta array from one or more SEO configuration objects. Pass SEO configuration for the parent route(s) and the current route to preserve meta data for all active routes. Similar to Object.assign(), each property is overwritten based on the object order. The exception is jsonLd, which is preserved so that each route has it's own independent jsonLd meta data. Learn more about how SEO works in Hydrogen.

Anchor to getseometagetSeoMeta

Anchor to seoInputs seoInputs [] required: getSeoMeta takes an arbitrary number of configuration object parameters. Values in each object are overwritten based on the object order. `jsonLd` properties are preserved between each configuration object.

SeoConfig

alternates
The `alternates` property is used to specify the language and geographical targeting when you have multiple versions of the same page in different languages. The `url` property tells search engines about these variations and helps them to serve the correct version to their users.
```
LanguageAlternate | LanguageAlternate[]
```
description
The description of the page. This is used in the `name="description"` meta tag as well as the `og:description` meta tag.
```
Maybe<string>
```
handle
The handle is used to generate the `twitter:site` and `twitter:creator` meta tags. Include the `@` symbol in the handle.
```
Maybe<string>
```
jsonLd
The `jsonLd` property is used to generate the `application/ld+json` script tag. This is used to provide structured data to search engines. The value should be an object that conforms to the schema.org spec. The `type` property should be the type of schema you are using. The `type` property is required and should be one of the following: - `Product` - `ItemList` - `Organization` - `WebSite` - `WebPage` - `BlogPosting` - `Thing` The value is validated via [schema-dts](https://www.npmjs.com/package/schema-dts)
```
WithContext<Thing> | WithContext<Thing>[]
```
media
The media associated with the given page (images, videos, etc). If you pass a string, it will be used as the `og:image` meta tag. If you pass an object or an array of objects, that will be used to generate `og:<type of media>` meta tags. The `url` property should be the URL of the media. The `height` and `width` properties are optional and should be the height and width of the media. The `altText` property is optional and should be a description of the media.
```
| Maybe<string>
    | Partial<SeoMedia>
    | (Partial<SeoMedia> | Maybe<string>)[]
```
robots
The `robots` property is used to specify the robots meta tag. This is used to tell search engines which pages should be indexed and which should not.
```
RobotsOptions
```
title
The `title` HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.
```
Maybe<string>
```
titleTemplate
Generate the title from a template that includes a `%s` placeholder for the title.
```
Maybe<string> | null
```
url
The canonical URL of the page. This is used to tell search engines which URL is the canonical version of a page. This is useful when you have multiple URLs that point to the same page. The value here will be used in the `rel="canonical"` link tag as well as the `og:url` meta tag.
```
Maybe<string>
```

LanguageAlternate

default
Whether the alternate page is the default page. This will add the `x-default` attribution to the language code.
```
boolean
```
language
Language code for the alternate page. This is used to generate the hreflang meta tag property.
```
string
```
url
The url of the alternate page. This is used to generate the hreflang meta tag property.
```
string
```

SeoMedia

altText
The alt text for the media. This is used to generate the og:<type of media>:alt meta tag.
```
Maybe<string> | undefined
```
height
The height in pixels of the media. This is used to generate the og:<type of media>:height meta tag.
```
Maybe<number> | undefined
```
type
Used to generate og:<type of media> meta tag
```
'image' | 'video' | 'audio'
```
url
The url value populates both url and secure_url and is used to infer the og:<type of media>:type meta tag.
```
Maybe<string> | undefined
```
width
The width in pixels of the media. This is used to generate the og:<type of media>:width meta tag.
```
Maybe<number> | undefined
```

RobotsOptions

maxImagePreview
Set the maximum size of an image preview for this page in a search results Can be one of the following: - `none` - No image preview is to be shown. - `standard` - A default image preview may be shown. - `large` - A larger image preview, up to the width of the viewport, may be shown. If no value is specified a default image preview size is used.
```
'none' | 'standard' | 'large'
```
maxSnippet
A number representing the maximum of amount characters to use as a textual snippet for a search result. This value can also be set to one of the following special values: - 0 - No snippet is to be shown. Equivalent to nosnippet. - 1 - The Search engine will choose the snippet length that it believes is most effective to help users discover your content and direct users to your site - -1 - No limit on the number of characters that can be shown in the snippet.
```
number
```
maxVideoPreview
The maximum number of seconds for videos on this page to show in search results. This value can also be set to one of the following special values: - 0 - A static image may be used with the `maxImagePreview` setting. - 1 - There is no limit to the size of the video preview. This applies to all forms of search results (at Google: web search, Google Images, Google Videos, Discover, Assistant).
```
number
```
noArchive
Do not show a cached link in search results.
```
boolean
```
noFollow
Do not follow the links on this page.
```
boolean
```
noImageIndex
Do not index images on this page.
```
boolean
```
noIndex
Do not show this page, media, or resource in search results.
```
boolean
```
noSnippet
Do not show a text snippet or video preview in the search results for this page.
```
boolean
```
noTranslate
Do not offer translation of this page in search results.
```
boolean
```
unavailableAfter
Do not show this page in search results after the specified date/time.
```
string
```

Examples

import {getSeoMeta} from '@shopify/hydrogen';

export async function loader({context}) {

const {shop} = await context.storefront.query(`

query layout {

shop {

name

description

}

`);

return {

seo: {

title: shop.title,

description: shop.description,

};

}

export const meta = ({data, matches}) => {

// Pass one or more arguments, preserving properties from parent routes

return getSeoMeta(matches[0].data.seo, data.seo);

};

Examples

Example code

JavaScript

import {getSeoMeta} from '@shopify/hydrogen';

export async function loader({context}) {
  const {shop} = await context.storefront.query(`
    query layout {
      shop {
        name
        description
      }
    }
  `);

  return {
    seo: {
      title: shop.title,
      description: shop.description,
    },
  };
}

export const meta = ({data, matches}) => {
  // Pass one or more arguments, preserving properties from parent routes
  return getSeoMeta(matches[0].data.seo, data.seo);
};

TypeScript

import {MetaFunction} from 'react-router';
import {LoaderFunctionArgs} from 'react-router';
import {getSeoMeta} from '@shopify/hydrogen';

export async function loader({context}: LoaderFunctionArgs) {
  const {shop} = await context.storefront.query(`
    query layout {
      shop {
        name
        description
      }
    }
  `);

  return {
    seo: {
      title: shop.title,
      description: shop.description,
    },
  };
}

export const meta: MetaFunction<typeof loader> = ({data, matches}) => {
  // Pass one or more arguments, preserving properties from parent routes
  return getSeoMeta((matches as any)[0].data.seo, data!.seo);
};

Was this page helpful?