Метатеги и links: SEO

Поисковики и соцсети читают теги в head страницы: title, meta name="description" и другие. В режиме фреймворка каждый модуль маршрута описывает свои теги экспортом meta, а компонент Meta в app/root.tsx выводит их в HTML ещё на сервере. Экспорт links так же добавляет теги link.

Статичные теги

// app/routes/about.tsx
import type { Route } from "./+types/about";
 
export function meta({}: Route.MetaArgs) {
  return [
    { title: "О блоге" },
    { name: "description", content: "Блог о React Router и веб-разработке." },
  ];
}

Откройте /about — вкладка браузера называется «О блоге», а в исходном коде страницы есть тег описания. meta возвращает массив объектов, каждый объект — один тег.

Теги из данных

Заголовок статьи известен только после загрузки. Функция meta получает данные загрузчика в поле data:

// app/routes/post.tsx
export function meta({ data }: Route.MetaArgs) {
  if (!data) {
    return [{ title: "Статья не найдена" }];
  }
  return [
    { title: data.post.title },
    { name: "description", content: data.post.body.slice(0, 150) },
    { property: "og:title", content: data.post.title },
  ];
}

На /posts/1 вкладка покажет заголовок статьи, а при отправке ссылки в мессенджер подтянется og:title. Если загрузчик выбросил 404, data пустое, поэтому его проверяют. В новых выпусках 7.x те же данные доступны и под именем loaderData.

Какие объекты бывают

Экспорт links

links возвращает массив атрибутов для тегов link: шрифты, стили, иконка:

// app/root.tsx
import type { Route } from "./+types/root";
 
export const links: Route.LinksFunction = () => [
  { rel: "icon", href: "/favicon.ico" },
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
];

Компонент Links в head выведет эти теги. Ссылки из links маршрута подключаются только на его страницах — так можно грузить стили статьи лишь там, где они нужны.

Частая ошибка

Ожидать, что теги родительского маршрута сложатся с тегами дочернего. Выводится meta только самого глубокого совпавшего маршрута, поэтому если в app/routes/post.tsx нет meta, но есть в макете, будет заголовок макета; а если есть в обоих — только заголовок статьи. Общие теги (charSet, viewport) поэтому пишут прямо в Layout файла app/root.tsx.