meta

The route meta export signature is changing in v2. You can prepare for this change at your convenience with the v2_meta future flag. For instructions on making this change see the v2 guide.

The meta export allows you to add metadata HTML tags for every route in your app. These tags are important for things like search engine optimization (SEO) and browser directives for determining certain behaviors. They can also be used by social media sites to display rich previews of your app.

The meta export will set meta tags for your html document. We highly recommend setting the title and description on every route aside from layout routes, as a layout’s index route will set the meta for the index path.

  1. import type { MetaFunction } from "@remix-run/node"; // or cloudflare/deno
  2. export const meta: MetaFunction = () => {
  3. return {
  4. title: "Something cool",
  5. description:
  6. "This becomes the nice preview on search results.",
  7. };
  8. };

The meta function may run on the server (e.g. the initial page load) or the client (e.g. a client navigation), so you cannot access server-specific data like process.env.NODE_ENV directly. If you need server-side data in meta, get the data in the loader and access it via the meta function’s data parameter.

There are a few special cases (read about those below). In the case of nested routes, the meta tags are merged automatically, so parent routes can add meta tags without the child routes needing to copy them.

HtmlMetaDescriptor

This is an object representation and abstraction of a <meta {...props}> element and its attributes. View the MDN docs for the meta API.

The meta export from a route should return a single HtmlMetaDescriptor object.

Almost every meta element takes a name and content attribute, with the exception of OpenGraph tags which use property instead of name. In either case, the attributes represent a key/value pair for each tag. Each pair in the HtmlMetaDescriptor object represents a separate meta element, and Remix maps each to the correct attributes for that tag.

The meta object can also hold a title reference which maps to the HTML element</a>.</p> <p>As a convenience, <code>charset: "utf-8"</code> will render a <code><meta charset="utf-8"></code>.</p> <p>As a last option, you can also pass an object of attribute/value pairs as the value. This can be used as an escape-hatch for meta tags like the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http-equiv">http-equiv tag</a> which uses <code>http-equiv</code> instead of <code>name</code>.</p> <p>Examples:</p> <pre><code>import type { MetaFunction } from "@remix-run/node"; // or cloudflare/deno export const meta: MetaFunction = () => ({ // Special cases charset: "utf-8", // <meta charset="utf-8"> "og:image": "https://josiesshakeshack.com/logo.jpg", // <meta property="og:image" content="https://josiesshakeshack.com/logo.jpg"> title: "Josie's Shake Shack", // <title>Josie's Shake Shack</title> // name => content description: "Delicious shakes", // <meta name="description" content="Delicious shakes"> viewport: "width=device-width, initial-scale=1", // <meta name="viewport" content="width=device-width, initial-scale=1"> // <meta {...value}> refresh: { httpEquiv: "refresh", content: "3;url=https://www.mozilla.org", }, // <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> }); </code></pre><a name='Page context in <code>meta</code> function' class="reference-link"></a><h2 id="h2-page-context-in-code-meta-code-function">Page context in <code>meta</code> function</h2><p><code>meta</code> function is passed an object that has following data:</p> <ul> <li><code>data</code> is whatever exported by <code>loader</code> function</li><li><code>location</code> is a <code>window.location</code>-like object that has some data about the current route</li><li><code>params</code> is an object containing route params</li><li><code>parentsData</code> is a hashmap of all the data exported by <code>loader</code> functions of current route and all of its parents</li></ul> <pre><code>export const meta: MetaFunction<typeof loader> = ({ data, params, }) => { if (!data) { return { title: "Missing Shake", description: `There is no shake with the ID of ${params.shakeId}. 😢`, }; } const { shake } = data; return { title: `${shake.name} milkshake`, description: shake.summary, }; }; </code></pre><p>To infer types for <code>parentsData</code>, provide a mapping from the route’s file path (relative to <code>app/</code>) to that route loader type:</p> <pre><code>export const loader = async () => { return json({ salesCount: 1074 }); }; </code></pre><pre><code>import type { loader as salesLoader } from "../../sales"; export const loader = async () => { return json({ name: "Customer name" }); }; const meta: MetaFunction< typeof loader, { "routes/sales": typeof salesLoader } > = ({ data, parentsData }) => { const { name } = data; // ^? string const { salesCount } = parentsData["routes/sales"]; // ^? number }; </code></pre><!-- 原文:https://remix.run/docs/en/main/route/meta -->