В этом посте мы рассмотрим, как добавить в наш проект реактивный шлем и использовать его для обработки метаданных внутри компонента.
Что такое React-шлем?
React-Helmet - это модуль, который предлагает компонент, который будет управлять всеми вашими изменениями в метатегах и выводить их в заголовок документа.
Это означает, что в проектах, где у нас есть несколько маршрутов, и мы хотим динамически обновлять метатеги для SEO на основе маршрута, отображаемого в данный момент на странице, react-Helm будет обрабатывать это за нас, давая нам контроль над метаданными приложения.
Настраивать
Прежде всего, нам нужно добавить в наш проект реактивный шлем и импортировать его в файл, который мы хотим, чтобы он сохранял наши изменения в заголовке документа.
npm install react-helmet --save
Добавление метаданных
Теперь мы рассмотрим пример того, как добавить метаданные к нашему компоненту.
import React from 'react' import { Helmet } from "react-helmet";
class App extends React.Component { render () { return ( <div> <Helmet> <title>App Title</title> <link rel="canonical" href="https://malikgabroun.com" /> </Helmet> </div> ); } };
Пример
В следующем примере мы рассмотрим, как динамически добавлять метаданные, создав компонент SEO и импортировав его внутри любого компонента, который вам нужен.
import { Helmet } from 'react-helmet'; import React from 'react';
const Seo = ({ title, description, pathSlug, keywords }) => { const url = `https://malikgabroun.com/${pathSlug}` return ( <Helmet htmlAttributes={{ lang: 'en' }} title={title} meta={[ { name: 'description', content: description, }, { name: 'keywords', content: keywords.join(), }, ]} links={[ { rel: 'canonical', href: url, }, ]} /> ); }
export default Seo;
После создания компонента необходимо импортировать его в любой компонент и передать необходимые реквизиты. Как правило, рекомендуется добавить кондиционирование для проверки этих свойств и установить значение по умолчанию на случай, если один из свойств отсутствует.
Чтобы увидеть полный пример, чтобы увидеть, как я использую компонент SEO на моем личном веб-сайте, посмотрите файл здесь.
Вывод
React-Helmet - это компонент, который позволяет нам и дает нам контроль над тем, как метаданные должны отображаться на веб-сайте.