Все современные фреймворки уделяют все больше внимания 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.