React helmet: овладеть головой вашего сайта React

]

раздела вашего веб -сайта, хотя и часто упускается из виду, имеет решающее значение для SEO, интеграции социальных сетей и загрузки основных активов, таких как таблицы стилей и аналитические библиотеки. Управление этим динамически в приложении React может быть сложным. Этот учебник демонстрирует, как эффективно обрабатывать содержание с использованием react helme, используя рендеринг на стороне сервера (SSR) с помощью Gatsby.

непосредственно манипулирование document.title и Meta Tags внутри componentDidMount является громоздким и подверженным ошибкам. React Helmet обеспечивает обтекаемое решение. Однако, чтобы полностью использовать свою силу, особенно для SEO (поисковые системы борются с клиентской стороной content), SSR имеет важное значение. Поэтому мы будем использовать Gatsby, статический генератор сайтов на основе React, который предлагает встроенный SSR.

настройка Gatsby и React Helmet

]

]
1. ]

   установить Gatsby Cli:

   npm i -g gatsby-cli

   ]
]
2. ]

   создать новый проект Gatsby:

   ]

   gatsby new my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

   ]
]

3. установить react helme и gatsby plugin: ]

   npm i-save react-helmet gatsby-plugin-react-helmet

   npm i --save react-helmet gatsby-plugin-react-helmet

   ]
]

4. configure gatsby: добавить плагин в gatsby-config.js : ]

   module.exports = { Плагины: [`gatsby-plugin-react-helmet`], };

   npm i --save react-helmet gatsby-plugin-react-helmet

   ]
]

создание компонента динамического макета

]

создать

components/layout.js file: ]

импорт реагирует из "React"; импорт шлем из "React-helmet"; Import {link} из "gatsby"; Импорт "../css/main.css"; Экспорт по умолчанию ({pagemeta, дети}) => (

import React from "react";
import Helmet from "react-helmet";
import { Link } from "gatsby";
import "../css/main.css";

export default ({ pageMeta, children }) => (
  
    
      
      
      
      
      
      
       {/* Add language support */}
      

{/* Add custom class */} {/* Example structured data (JSON-LD) */} > ); src/css/main.css

: . Slick { фоновый цвет: желтый; Цвет: Limegreen; Фондовая семья: «комикс без мс», курсив, Sans-Serif; } ]

создание страниц

npm i --save react-helmet gatsby-plugin-react-helmet

update

src/pages/index.js

:

] импорт реагирует из "React"; Макет импорта из "../components/layout"; Экспорт DEFALT () => ( ]

Добро пожаловать в Cars4all!

import React from "react";
import Layout from "../components/layout";

export default () => (
  
    
Welcome to Cars4All!
  
);

:

] импорт реагирует из "React"; Макет импорта из "../components/layout"; Экспорт DEFALT () => ( ]

наши автомобили

import React from "react";
import Layout from "../components/layout";

export default () => (
  
    
Our Cars
    {/* ... car listings ... */}
  
);

run

gatsby build

, а затем

gatsby служат ], чтобы увидеть результаты с SSR. Осмотрите исходный код, чтобы проверить, что содержание React Helmet правильно отображается. Атрибут lang класс CSS будет применяться, как и ожидалось. Не забудьте заменить структурированные данные заполнителя на ваши фактические данные. Этот подход гарантирует, что метаданные вашего приложения React должным образом индексируются поисковыми системами и сканерами в социальных сетях. ]