React Helmet : React 사이트의 헤드 마스터 링

웹 사이트의 섹션은 종종 간과되지만 SEO, 소셜 미디어 통합 및 스타일 시트 및 분석 라이브러리와 같은 필수 자산을로드하는 데 중요합니다. React 응용 프로그램 에서이 동적으로 관리하는 것은 어려울 수 있습니다. 이 튜토리얼은 React Helmet을 사용하여 컨텐츠를 효율적으로 처리하여 Gatsby와 함께 서버 측 렌더링 (SSR)을 활용하는 방법을 보여줍니다.

문서를 직접 조작하는 componentDidMount 내에서 메타 태그를 직접 조작하는 것은 번거롭고 오류가 발생합니다. React Helmet은 간소화 된 솔루션을 제공합니다. 그러나 특히 SEO (검색 엔진이 클라이언트 측 렌더링 된

1. Gatsby Cli를 설치합니다 :

   npm i -g gatsby-cli

   npm i -g gatsby -cli

2. 새로운 Gatsby 프로젝트를 만듭니다 :

   npm i -g gatsby-cli

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

3. React Helmet 및 Gatsby 플러그인 설치 :

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

4. Gatsby 구성 : 플러그인을 gatsby-config.js 에 추가합니다. :

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

동적 레이아웃 구성 요소 구축

components/layout.js 파일 생성 :

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

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

생성 src/css/main.css :

.slick {
  background-color: yellow;
  color: limegreen;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

페이지 만들기

업데이트 src/pages/index.js :

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

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

create src/pages/cars.js :

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

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

건물 및 서빙

실행 Gatsby 빌드 및 Gatsby Serv SSR의 결과를 볼 수 있습니다. REACT Helmet의 컨텐츠가 올바르게 렌더링되는지 확인하려면 소스 코드를 검사하십시오. lang 속성 및 사용자 정의 CSS 클래스는 예상대로 적용됩니다. 자리 표시 자 구조 데이터를 실제 데이터로 바꾸는 것을 잊지 마십시오. 이 접근 방식은 React Application의 메타 데이터가 검색 엔진과 소셜 미디어 크롤러에 의해 올바르게 색인되도록합니다.