Rename meta types for consistency

docs/api/conventions.md

@@ -664,6 +664,8 @@ There are two types of link descriptors you can return:
 
 This is an object representation of a normal `<link {...props} />` element. [View the MDN docs for the link API][link-tag].
 
+The `links` export from a route should return an array of `HtmlLinkDescriptor` objects.
+
 Examples:
 
 ```tsx
@@ -710,6 +712,30 @@ export let links: LinksFunction = () => {
 };
 ```
 
+#### HtmlMetaDescriptor
+
+This is an object representation and abstraction of a `<meta {...props} />` element and its attributes. [View the MDN docs for the meta API](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta).
+
+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](https://ogp.me/) 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 `<title>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
+
+Examples:
+
+```tsx
+import type { MetaFunction } from "remix";
+
+export let meta: MetaFunction = () => {
+  return {
+    title: "Josie's Shake Shack", // <title>Josie's Shake Shack</title>
+    description: "Delicious shakes", // <meta name="description" content="Delicious shakes">
+    "og:image": "https://josiesshakeshack.com/logo.jpg" // <meta property="og:image" content="https://josiesshakeshack.com/logo.jpg">
+  };
+};
+```
+
 #### `PageLinkDescriptor`
 
 These descriptors allow you to prefetch the resources for a page the user is likely to navigate to. While this API is useful, you might get more mileage out of `<Link prefetch="render">` instead. But if you'd like, you can get the same behavior with this API.

packages/remix-react/components.tsx

@@ -44,7 +44,7 @@ import { createClientRoutes } from "./routes";
 import type { RouteData } from "./routeData";
 import type { RouteMatch } from "./routeMatching";
 import { matchClientRoutes } from "./routeMatching";
-import type { RouteModules, MetaDescriptor } from "./routeModules";
+import type { RouteModules, HtmlMetaDescriptor } from "./routeModules";
 import { createTransitionManager } from "./transition";
 import type { Transition, Fetcher, Submission } from "./transition";
 
@@ -614,7 +614,7 @@ export function Meta() {
   let { matches, routeData, routeModules } = useRemixEntryContext();
   let location = useLocation();
 
-  let meta: MetaDescriptor = {};
+  let meta: HtmlMetaDescriptor = {};
   let parentsData: { [routeId: string]: AppData } = {};
 
   for (let match of matches) {

packages/remix-react/index.tsx

@@ -35,7 +35,8 @@ export type { FormMethod, FormEncType } from "./data";
 export type { ThrownResponse } from "./errors";
 export { useCatch } from "./errorBoundaries";
 
-export type { ShouldReloadFunction } from "./routeModules";
+export type { HtmlLinkDescriptor } from "./links";
+export type { ShouldReloadFunction, HtmlMetaDescriptor } from "./routeModules";
 
 export type { RemixServerProps } from "./server";
 export { RemixServer } from "./server";

packages/remix-react/routeModules.ts

@@ -18,7 +18,7 @@ export interface RouteModule {
   default: RouteComponent;
   handle?: RouteHandle;
   links?: LinksFunction;
-  meta?: MetaFunction | MetaDescriptor;
+  meta?: MetaFunction | HtmlMetaDescriptor;
   unstable_shouldReload?: ShouldReloadFunction;
 }
 
@@ -51,7 +51,7 @@ export interface MetaFunction {
     parentsData: RouteData;
     params: Params;
     location: Location;
-  }): MetaDescriptor;
+  }): HtmlMetaDescriptor;
 }
 
 /**
@@ -60,7 +60,7 @@ export interface MetaFunction {
  * tag, or an array of strings that will render multiple tags with the same
  * `name` attribute.
  */
-export interface MetaDescriptor {
+export interface HtmlMetaDescriptor {
   [name: string]: string | string[];
 }
 

packages/remix-server-runtime/index.ts

@@ -20,7 +20,7 @@ export type { EntryContext } from "./entry";
 
 export type {
   LinkDescriptor,
-  HTMLLinkDescriptor,
+  HtmlLinkDescriptor,
   PageLinkDescriptor
 } from "./links";
 
@@ -31,10 +31,11 @@ export type {
   DataFunctionArgs,
   ErrorBoundaryComponent,
   HeadersFunction,
+  HtmlMetaDescriptor,
   LinksFunction,
   LoaderFunction,
-  MetaFunction,
   MetaDescriptor,
+  MetaFunction,
   RouteComponent,
   RouteHandle
 } from "./routeModules";

packages/remix-server-runtime/links.ts

@@ -3,7 +3,7 @@
  *
  * WHATWG Specification: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
  */
-export interface HTMLLinkDescriptor {
+export interface HtmlLinkDescriptor {
   /**
    * Address of the hyperlink
    */
@@ -127,7 +127,7 @@ export interface HTMLLinkDescriptor {
 
 export interface PageLinkDescriptor
   extends Omit<
-    HTMLLinkDescriptor,
+    HtmlLinkDescriptor,
     | "href"
     | "rel"
     | "type"
@@ -144,4 +144,4 @@ export interface PageLinkDescriptor
   page: string;
 }
 
-export type LinkDescriptor = HTMLLinkDescriptor | PageLinkDescriptor;
+export type LinkDescriptor = HtmlLinkDescriptor | PageLinkDescriptor;

packages/remix-server-runtime/magicExports/server.ts

@@ -13,14 +13,15 @@ export type {
   AppData,
   EntryContext,
   LinkDescriptor,
-  HTMLLinkDescriptor,
+  HtmlLinkDescriptor,
   PageLinkDescriptor,
   ErrorBoundaryComponent,
   ActionFunction,
   HeadersFunction,
   LinksFunction,
   LoaderFunction,
   MetaDescriptor,
+  HtmlMetaDescriptor,
   MetaFunction,
   RouteComponent,
   RouteHandle,

packages/remix-server-runtime/routeModules.ts

@@ -82,7 +82,7 @@ export interface MetaFunction {
     parentsData: RouteData;
     params: Params;
     location: Location;
-  }): MetaDescriptor;
+  }): HtmlMetaDescriptor;
 }
 
 /**
@@ -91,10 +91,12 @@ export interface MetaFunction {
  * tag, or an array of strings that will render multiple tags with the same
  * `name` attribute.
  */
-export interface MetaDescriptor {
+export interface HtmlMetaDescriptor {
   [name: string]: string | string[];
 }
 
+export type MetaDescriptor = HtmlMetaDescriptor;
+
 /**
  * A React component that is rendered for a route.
  */
@@ -111,7 +113,7 @@ export interface EntryRouteModule {
   default: RouteComponent;
   handle?: RouteHandle;
   links?: LinksFunction;
-  meta?: MetaFunction | MetaDescriptor;
+  meta?: MetaFunction | HtmlMetaDescriptor;
 }
 
 export interface ServerRouteModule extends EntryRouteModule {