# getSeoMeta 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). ### Example code ```js 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); }; ``` ```ts 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).data.seo, data!.seo); }; ``` ## getSeoMeta ### GetSeoMetaTypeForDocs ### seoInputs value: `SeoConfig[]` `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 ### title value: `Maybe<string>` 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. ### titleTemplate value: `string` Generate the title from a template that includes a `%s` placeholder for the title. ### media value: `string | Partial<SeoMedia> | (string | Partial<SeoMedia>)[]` 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. ### description value: `Maybe<string>` The description of the page. This is used in the `name="description"` meta tag as well as the `og:description` meta tag. ### url value: `Maybe<string>` 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. ### handle value: `Maybe<string>` The handle is used to generate the `twitter:site` and `twitter:creator` meta tags. Include the `@` symbol in the handle. ### jsonLd value: `WithContext<Thing> | WithContext<Thing>[]` 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) ### alternates value: `LanguageAlternate | LanguageAlternate[]` 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. ### robots value: `RobotsOptions` 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. ### SeoMedia ### type value: `"audio" | "video" | "image"` Used to generate og:<type of media> meta tag ### url value: `string` The url value populates both url and secure_url and is used to infer the og:<type of media>:type meta tag. ### height value: `number` The height in pixels of the media. This is used to generate the og:<type of media>:height meta tag. ### width value: `number` The width in pixels of the media. This is used to generate the og:<type of media>:width meta tag. ### altText value: `string` The alt text for the media. This is used to generate the og:<type of media>:alt meta tag. ### LanguageAlternate ### language value: `string` Language code for the alternate page. This is used to generate the hreflang meta tag property. ### default value: `boolean` Whether the alternate page is the default page. This will add the `x-default` attribution to the language code. ### url value: `string` The url of the alternate page. This is used to generate the hreflang meta tag property. ### RobotsOptions ### maxImagePreview value: `"none" | "standard" | "large"` 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. ### maxSnippet value: `number` 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. ### maxVideoPreview value: `number` 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). ### noArchive value: `boolean` Do not show a cached link in search results. ### noFollow value: `boolean` Do not follow the links on this page. ### noImageIndex value: `boolean` Do not index images on this page. ### noIndex value: `boolean` Do not show this page, media, or resource in search results. ### noSnippet value: `boolean` Do not show a text snippet or video preview in the search results for this page. ### noTranslate value: `boolean` Do not offer translation of this page in search results. ### unavailableAfter value: `string` Do not show this page in search results after the specified date/time.