Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet React

React Helmet: Menguasai kepala laman reaksi anda

The Bahagian laman web anda, sementara sering diabaikan, adalah penting untuk SEO, integrasi media sosial, dan memuatkan aset penting seperti stylesheets dan perpustakaan analisis. Menguruskan ini secara dinamik dalam aplikasi React boleh mencabar. Tutorial ini menunjukkan cara mengendalikan dengan cekap<code> Kandungan menggunakan Helmet React, memanfaatkan rendering sisi pelayan (SSR) dengan Gatsby.

Secara langsung memanipulasi document.title dan meta dalam componentDidMount adalah rumit dan rawan ralat. React Helmet menyediakan penyelesaian yang diselaraskan. Walau bagaimanapun, untuk memanfaatkan sepenuhnya kuasa, terutamanya untuk SEO (enjin carian berjuang dengan klien yang diberikan kandungan), SSR adalah penting. Oleh itu, kami akan menggunakan Gatsby, penjana tapak statik berasaskan React yang menawarkan SSR terbina dalam.

Menyediakan topi keledar Gatsby dan React

1. Pasang Gatsby CLI:

    npm i -g gatsby -cli

2. Buat projek Gatsby baru:

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

3. Pasang Helmet React dan Gatsby Plugin:

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

4. Konfigurasikan Gatsby: Tambahkan plugin ke gatsby-config.js :

    modul.exports = {
     Plugin: [`gatsby-plugin-react-helmet`],
   };

Membina komponen susun atur yang dinamik

Buat Fail components/layout.js :

 import bertindak balas daripada "bertindak balas";
Helmet import dari "React-Helmet";
import {link} dari "Gatsby";
import "../css/main.css";

Eksport 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 dengan amanah">
      <meta name="description" content="{pagemeta.description}">
      <meta name="keywords" content="{pagemeta.keywords.join (',')}">
      </helmet> {/ * Tambah sokongan bahasa */}
      

{/ * Tambah kelas tersuai */} {/ * Contoh data berstruktur (json-ld) */}

Cars4all

• Rumah
• Kereta kami

{anak}

{`$ {new date (). getfullear ()} tidak ada hak apa pun yang disimpan`}

> );

Buat src/css/main.css :

 .slick {
  latar belakang warna: kuning;
  Warna: Limegreen;
  Font-Family: "Comic Sans MS", Cursive, Sans-Serif;
}

Membuat halaman

Kemas kini src/pages/index.js :

 import bertindak balas daripada "bertindak balas";
susun atur import dari "../components/layout";

Eksport lalai () => (
  <layout pagemeta="{{" title: description: to cars4all keywords: lang:>
    <div>Selamat datang ke Cars4All!</div>
  </layout>
);

Buat src/pages/cars.js :

 import bertindak balas daripada "bertindak balas";
susun atur import dari "../components/layout";

Eksport lalai () => (
  <layout pagemeta="{{" title: cars description: our selection of cars. keywords: customcssclass: apply custom css class lang:>
    <h2 id="Kereta-kami">Kereta kami</h2>
    {/ * ... senarai kereta ... */}
  </layout>
);

Membina dan berkhidmat

Jalankan gatsby build dan kemudian gatsby serve melihat hasilnya dengan SSR. Periksa kod sumber untuk mengesahkan bahawa kandungan Helmet React diberikan dengan betul. Atribut lang dan kelas CSS tersuai akan digunakan seperti yang diharapkan. Ingatlah untuk menggantikan data berstruktur letak dengan data sebenar anda. Pendekatan ini memastikan metadata aplikasi React anda diindeks dengan betul oleh enjin carian dan crawler media sosial.

Atas ialah kandungan terperinci Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!