C'est tout dans la tête: gérer la tête de document d'un site alimenté par réact avec un casque React

Casque React: Master la tête de votre site React

Le La section de votre site Web, bien que souvent négligé, est cruciale pour le référencement, l'intégration des médias sociaux et le chargement des actifs essentiels comme les feuilles de style et les bibliothèques d'analyse. La gestion dynamique dans une application React peut être difficile. Ce tutoriel montre comment gérer efficacement le<code> Contenu à l'aide du casque React, tirant parti du rendu côté serveur (SSR) avec GATSBY.

Manipuler directement document.title et Meta Tags dans componentDidMount est lourd et sujet aux erreurs. React Helmet fournit une solution rationalisée. Cependant, pour exploiter pleinement son pouvoir, en particulier pour le référencement (les moteurs de recherche ont du mal avec le côté client rendu Contenu), SSR est essentiel. Par conséquent, nous utiliserons Gatsby, un générateur de sites statiques basé sur React qui propose une SSR intégrée.

Configuration du casque Gatsby et React

1. Installer Gatsby CLI:

    npm i -g gatsby-cli

2. Créez un nouveau projet Gatsby:

    Gatsby New My-Gatsby-Site https://github.com/gatsbyjs/gatsby-starter-hello-world

3. Installez le casque React et le plugin Gatsby:

    NPM I - Save React-helmet Gatsby-Plugin-React-Helmet

4. Configurer Gatsby: Ajoutez le plugin à gatsby-config.js :

    module.exports = {
     Plugins: [`Gatsby-Plugin-React-Helmet`],
   };

Construire un composant de disposition dynamique

Créer un fichier components/layout.js :

 importer réagir à partir de "réagir";
Casque d'importation de "React-helmet";
import {link} de "gatsby";
import "../css/main.css";

Export Default ({PageMeta, Children}) => (
  
    <helmet>
      <title>{`CARS4ALL | $ {PageMeta.title} `}</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="author" content="Bob de confiance">
      <meta name="description" content="{PageMeta.Description}">
      <meta name="keywords" content="{pageMeta.keywords.join (',')}">
      </helmet> {/ * Ajouter une prise en charge du langage * /}
      

{/ * Ajouter une classe personnalisée * /} {/ * Exemple de données structurées (JSON-LD) * /}

CARS4 ALL

• Maison
• Nos voitures

{enfants}

?

> ));

Créer src/css/main.css :

 .slick {
  Color d'arrière-plan: jaune;
  Couleur: Limegreen;
  Font-Family: "Comic Sans MS", Cursive, Sans-Serif;
}

Création de pages

Mettre à jour src/pages/index.js :

 importer réagir à partir de "réagir";
Importer la disposition de "../components/layout";

Export default () => (
  <layout pagemeta="{{" title: description: to cars4all keywords: lang:>
    <div>Bienvenue sur Cars4all!</div>
  </layout>
));

Créer src/pages/cars.js :

 importer réagir à partir de "réagir";
Importer la disposition de "../components/layout";

Export default () => (
  <layout pagemeta="{{" title: cars description: our selection of cars. keywords: customcssclass: apply custom css class lang:>
    <h2 id="Nos-voitures">Nos voitures</h2>
    {/ * ... listes de voitures ... * /}
  </layout>
));

Bâtiment et service

Exécutez gatsby build , puis gatsby serve à voir les résultats avec SSR. Inspectez le code source pour vérifier que le contenu de React Helmet est correctement rendu. L'attribut lang et la classe CSS personnalisée seront appliqués comme prévu. N'oubliez pas de remplacer les données structurées de l'espace réservé par vos données réelles. Cette approche garantit que les métadonnées de votre application React sont correctement indexées par les moteurs de recherche et les robots de médias sociaux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!