Удивительные SEO-возможности Remix

Все современные фреймворки уделяют все больше внимания SEO и тому, как облегчить разработчикам внедрение этого в свои сайты.

SEO расшифровывается как Search Engine Optimization и сводится к тому, насколько хорошо вы оптимизируете свой сайт для поисковых систем.

Примечание: Ознакомьтесь с этими пятью тегами, чтобы начать работу с SEO.

Где Remix отображает SEO-теги

В Remix есть очень удобный крючок для установки метаданных, и все начинается в файле root.tsx.

Вы можете найти там базовый установщик метаданных в виде этой функции:

export const meta: MetaFunction = () => ({
  charset: 'utf-8',
  title: 'Remix Notes',
  viewport: 'width=device-width,initial-scale=1',
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Как видите, здесь мы задаем только базовые параметры. Мы немного углубимся в изменение этого в последующих разделах.

Затем в рендере ниже мы используем элемент <Meta /> для рендеринга фактического раздела следующим образом:

export default function App() {
  return (
    <html lang='en' className='h-full'>
      <head>
        <Meta />
        <Links />
      </head>
      ...
    </html>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Самое интересное в этой установке то, что мы можем использовать эту MetaFunction везде в нашем приложении.

Когда мы просматриваем исходный код любой из наших страниц, мы должны увидеть, по крайней мере, следующее.

<head>
  <meta charset="utf-8" />
  <title>Remix Notes</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
</head>
Вход в полноэкранный режим Выход из полноэкранного режима

Установка мета-реквизитов на одной странице

Давайте возьмем за основу наш пример с покемонами.

Откроем файл routes/pokemon/index.tsx и добавим туда функцию meta:

export const meta: MetaFunction = () => ({
  title: 'The complete Pokémon list',
  description: 'This is the list with all existing Pokémon.',
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы могли заметить, что мы добавили описание, которое раньше не использовали.
Это не проблема для Remix, так как он просто добавит его только на эту страницу.

В результате для этой страницы /pokemon получится следующий HTML-вывод.

<head>
  <meta charset="utf-8" />
  <title>The complete Pokémon list</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
  <meta
    content="This is the list with all existing Pokémon"
    name="description"
  />
</head>
Вход в полноэкранный режим Выход из полноэкранного режима

Динамические SEO-теги в Remix

До сих пор мы использовали статические теги, где мы определяем строки, которые хотим установить.

Но что произойдет, если мы захотим добавить динамические SEO-теги на нашу отдельную страницу с покемонами?

Помните, как мы использовали функцию loader на этой единственной странице?
Мы можем использовать эти возвращаемые данные в нашей метафункции, просто передав их.

export const meta: MetaFunction = ({
  data,
}: {
  data: LoaderData | undefined,
}) => {
  if (!data) {
    return {
      title: 'Pokémon not found',
      description: 'We could not find this Pokémon',
    };
  }

  const name = data.pokemon.name;
  return {
    title: `This is the amazing ${name}`,
    description: `We caught the Pokémon with the name: ${name}`,
  };
};
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы получаем свойство data, которое предоставил наш загрузчик.
Затем мы можем определить, доступны ли эти данные, и даже добавить запасной вариант на случай, если мы не сможем их найти.

Допустим, мы открываем страницу /pokemon/charizard и получаем следующие метатеги:

<head>
  <meta charset="utf-8" />
  <title>This is the amazing charizard</title>
  <meta content="width=device-width,initial-scale=1" name="viewport" />
  <meta
    content="We caught the Pokémon with the name: charizard"
    name="description"
  />
</head>
Вход в полноэкранный режим Выход из полноэкранного режима

Отлично! Теперь мы сделали его динамичным.

Опции SEO в Remix

До сих пор мы затронули только некоторые базовые SEO-теги, которые можно установить с помощью Remix, но существует множество метафункций, которые можно установить с помощью этой метафункции.

Мы можем использовать все метатеги и даже установить свои собственные, если вам это когда-нибудь понадобится.

Чтобы найти полный список всех метатегов, посетите следующий сайт: Обзор метатегов.

Вот пример того, что мы можем установить:

export const meta: MetaFunction = () => {
  return {
    charset: 'utf-8',
    description: 'Welcome to our Remix app',
    keywords: 'Remix,app',
    'twitter:image': 'https://remix.app/social.png',
    'twitter:card': 'summary_large_image',
    'twitter:creator': '@DailyDevTips1',
    'twitter:site': '@DailyDevTips1',
    'twitter:title': 'Remix app',
    'twitter:description': 'Chris created this Remix app, check it out',
    custom: 'Something custom you like.',
  };
};
Войти в полноэкранный режим Выйти из полноэкранного режима

Что привело бы к следующему HTML:

<head>
  <meta charset="utf-8" />
  <meta content="Welcome to our Remix app" name="description" />
  <meta content="Remix,app" name="keywords" />
  <meta content="https://remix.app/social.png" name="twitter:image" />
  <meta content="summary_large_image" name="twitter:card" />
  <meta content="@DailyDevTips1" name="twitter:creator" />
  <meta content="@DailyDevTips1" name="twitter:site" />
  <meta content="Remix app" name="twitter:title" />
  <meta
    content="Chris created this Remix app, check it out"
    name="twitter:description"
  />
  <meta content="Something custom you like" name="custom" />
</head>
Войти в полноэкранный режим Выйти из полноэкранного режима

Должен сказать, что я впечатлен тем, как легко Remix позволяет установить эти SEO-свойства из коробки.

Вы также можете посмотреть мой исходный код на GitHub.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
Procodings.ru
Добавить комментарий