export interface SeoConfig { /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title */ title?: Maybe; /** * Generate the title from a template that includes a `%s` placeholder for the title. * * @example * ```js * { * title: 'My Page', * titleTemplate: 'My Site - %s', * } * ``` */ titleTemplate?: Maybe | null; /** * 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:` 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. * * @example * ```js * { * media: [ * { * url: 'https://example.com/image.jpg', * type: 'image', * height: '400', * width: '400', * altText: 'A custom snowboard with an alpine color pallet.', * } * ] * } * ``` * */ media?: | Maybe | Partial | (Partial | Maybe)[]; /** * The description of the page. This is used in the `name="description"` meta tag as well as the `og:description` meta * tag. * * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta */ description?: Maybe; /** * 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. * * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link */ url?: Maybe; /** * The handle is used to generate the `twitter:site` and `twitter:creator` meta tags. Include the `@` symbol in the * handle. * * @example * ```js * { * handle: '@shopify' * } * ``` */ handle?: Maybe; /** * 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) * * @example * ```js * { * jsonLd: { * '@context': 'https://schema.org', * '@type': 'Product', * name: 'My Product', * image: 'https://hydrogen.shop/image.jpg', * description: 'A product that is great', * sku: '12345', * mpn: '12345', * brand: { * '@type': 'Thing', * name: 'My Brand', * }, * aggregateRating: { * '@type': 'AggregateRating', * ratingValue: '4.5', * reviewCount: '100', * }, * offers: { * '@type': 'Offer', * priceCurrency: 'USD', * price: '100', * priceValidUntil: '2020-11-05', * itemCondition: 'https://schema.org/NewCondition', * availability: 'https://schema.org/InStock', * seller: { * '@type': 'Organization', * name: 'My Brand', * }, * }, * } * } * ``` * * @see https://schema.org/docs/schemas.html * @see https://developers.google.com/search/docs/guides/intro-structured-data * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script * */ jsonLd?: WithContext | WithContext[]; /** * 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. * * @example * ```js * { * alternates: [ * { * language: 'en-US', * url: 'https://hydrogen.shop/en-us', * default: true, * }, * { * language: 'fr-CA', * url: 'https://hydrogen.shop/fr-ca', * }, * ] * } * ``` * * @see https://support.google.com/webmasters/answer/189077?hl=en */ alternates?: LanguageAlternate | LanguageAlternate[]; /** * 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. * * @see https://developers.google.com/search/reference/robots_meta_tag */ robots?: RobotsOptions; }