Generate a [Remix meta array](https://remix.run/docs/en/main/route/meta) 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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://shopify.dev/docs/custom-storefronts/hydrogen/seo).
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);
};
import {MetaFunction} from '@remix-run/react';
import {LoaderFunctionArgs} from '@remix-run/server-runtime';
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);
};
`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.
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.
The description of the page. This is used in the `name="description"` meta tag as well as the `og:description` meta tag.
The handle is used to generate the `twitter:site` and `twitter:creator` meta tags. Include the `@` symbol in the handle.
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)
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.
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.
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.
Generate the title from a template that includes a `%s` placeholder for the title.
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.
Whether the alternate page is the default page. This will add the `x-default` attribution to the language code.
Language code for the alternate page. This is used to generate the hreflang meta tag property.
The url of the alternate page. This is used to generate the hreflang meta tag property.
The alt text for the media. This is used to generate the og:<type of media>:alt meta tag.
The height in pixels of the media. This is used to generate the og:<type of media>:height meta tag.
Used to generate og:<type of media> meta tag
The url value populates both url and secure_url and is used to infer the og:<type of media>:type meta tag.
The width in pixels of the media. This is used to generate the og:<type of media>:width meta tag.
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.
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.
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).
Do not show a cached link in search results.
Do not follow the links on this page.
Do not index images on this page.
Do not show this page, media, or resource in search results.
Do not show a text snippet or video preview in the search results for this page.
Do not offer translation of this page in search results.
Do not show this page in search results after the specified date/time.