그것은 모두 헤드에있는 모든 것 : React Helmet과 함께 React 전원 사이트의 문서 헤드 관리

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

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

componentDidMount 내의 제목 및 메타 태그는 번거롭고 오류가 발생하기 쉬운 document.title 직접 조작합니다. React Helmet은 간소화 된 솔루션을 제공합니다. 그러나 특히 SEO (검색 엔진이 클라이언트 측면 렌더링으로 어려움을 겪고 있습니다. 내용), SSR이 필수적입니다. 따라서 내장 SSR을 제공하는 반응 기반 정적 사이트 생성기 인 Gatsby를 사용하겠습니다.

Gatsby 및 React Helmet 설정

1. Gatsby Cli 설치 :

    NPM I -G 개츠비 클리

2. 새로운 개츠비 프로젝트 만들기 :

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

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

    NPM I-사원 반응-나선형 Gatsby-Plugin-React-Helmet

4. Gatsby 구성 : gatsby-config.js 에 플러그인을 추가하십시오.

    module.exports = {
     플러그인 : [`Gatsby-Plugin-React-Helmet`],
   };

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

components/layout.js 파일 :

 "React"에서 React React;
"React-Helmet"에서 헬멧 가져 오기;
"Gatsby"에서 {link} 가져 오기;
import "../css/main.css";

내보내기 기본값 ({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="밥은 신뢰할 수 있습니다">
      <meta name="description" content="{pagemeta.description}">
      <meta name="keywords" content="{pagemeta.keywords.join ( ',')}">
      </helmet> {/ * 언어 지원 추가 */}
      

{/ * 커스텀 클래스 추가 */} {/ * 예제 구조화 된 데이터 (JSON-LD) */}

Cars4all

• 집
• 우리 차

{어린이들}

{`$ {new date (). getlyearear ()} 권리가 없음`}}

> );

src/css/main.css 생성 :

 .slick {
  배경색 : 노란색;
  색상 : 라임 그린;
  Font-Family : "Comic Sans MS", 필기체, Sans-Serif;
}

페이지 만들기

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

 "React"에서 React React;
"../components/layout"에서 레이아웃 가져 오기;

내보내기 default () => (
  <layout pagemeta="{{" title: description: to cars4all keywords: lang:>
    <div>Cars4all에 오신 것을 환영합니다!</div>
  </layout>
);

src/pages/cars.js 만들기 :

 "React"에서 React React;
"../components/layout"에서 레이아웃 가져 오기;

내보내기 default () => (
  <layout pagemeta="{{" title: cars description: our selection of cars. keywords: customcssclass: apply custom css class lang:>
    <h2 id="우리-차">우리 차</h2>
    {/ * ... 자동차 목록 ... */}
  </layout>
);

건축 및 서빙

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

위 내용은 그것은 모두 헤드에있는 모든 것 : React Helmet과 함께 React 전원 사이트의 문서 헤드 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!