React 앱을 위한 메타 태그를 쉽게 생성

사용자가 볼 수 있는 모든 React 앱 또는 웹사이트에는 좋은 SEO 관행이 있어야 합니다.

모든 SEO 메타데이터를 제공하기 위한 이동 패키지는 react-helmet 입니다.

좋은 점은 일반적인 반응 구성 요소처럼 사용할 수 있고 다음과 같이 모든 메타 태그를 자식으로 나열할 수 있다는 것입니다.

import React from "react";
import Helmet from "react-helmet";

function App() {
  return (
    <main>
      <Helmet>
        <title>My app</title>
      </Helmet>
      <div>{/* app content... */}</div>
    </main>
  );
}

많은 React 앱(특히 Gatsby 앱)을 만들면서 알게 된 것은 앱이 검색 엔진에서 인식되고 소셜에 연결될 때 표시될 수 있도록 하는 데 필요한 개별 메타 태그를 모두 만들고 관리하는 것이 매우 지루하다는 것입니다. Facebook 또는 Twitter와 같은 미디어 앱.

메타데이터를 자동으로 생성하고 테스트하기 위해 내가 찾은 최고의 도구는 HeyMeta 사이트에서 사용할 수 있습니다.



이를 통해 사이트의 메타데이터를 테스트하고 다른 사용자에게 어떻게 보일지 미리 볼 수 있을 뿐만 아니라 필요한 메타 태그를 자동으로 생성할 수 있습니다.

다음은 간단한 예입니다. 내 개인 사이트(reedbarger.com)를 Hey Meta에 연결하고 결과를 확인하겠습니다.



가장 먼저 볼 수 있는 것은 소셜 미디어 사이트인 Twitter에서 어떻게 보이는지 보여주는 소셜 카드 미리 보기입니다.

그리고 이미지 뿐만 아니라 앱 제목, 설명, 링크를 포함해야 합니다.

그 아래에서 제목, 설명 및 이미지를 보고 변경할 수 있습니다.



가장 편리한 점은 어떤 분야든 능동적으로 변경할 수 있다는 것입니다. 일단 흐리게 처리하면 해당 변경 사항이 어떻게 표시되는지 미리 볼 수 있는 버튼이 제공됩니다.

내 경우에는 제목을 변경하고('Reed Barger'에서 'Reed'로) 입력에서 멀리 클릭하면 미리보기를 업데이트할 수 있습니다.



필요한 모든 변경을 완료한 후에는 하단의 메타 태그 생성 영역으로 이동할 수 있습니다.



생성 버튼을 누르면 Google 및 검색 엔진, Facebook 및 Twitter에 필요한 모든 태그가 제공됩니다.

이를 복사하여 Helmet 태그에 바로 붙여넣기만 하면 됩니다. 맨 끝에 후행 슬래시를 추가하여 각 태그를 JSX로 변환하고 주석을 제거하십시오(또는 HTML이 아닌 유효한 JSX 주석으로 변환).

나를 위한 최종 제품은 다음과 같습니다.

import React from "react";
import Helmet from "react-helmet";

function App() {
  return (
    <main>
      <Helmet>
        {/* <!-- HTML Meta Tags --> */}
        <title>Reed</title>
        <meta
          name="description"
          content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
        />

        {/* <!-- Google / Search Engine Tags --> */}
        <meta itemprop="name" content="Reed" />
        <meta
          itemprop="description"
          content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
        />
        <meta
          itemprop="image"
          content="http://reedbarger.com/static/ca-styled-logo-5205dbb0983e1531d228c98584ab5711.png"
        />

        {/* <!-- Facebook Meta Tags --> */}
        <meta property="og:url" content="https://reedbarger.com" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Reed" />
        <meta
          property="og:description"
          content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
        />
        <meta
          property="og:image"
          content="http://reedbarger.com/static/ca-styled-logo-5205dbb0983e1531d228c98584ab5711.png"
        />

        {/* <!-- Twitter Meta Tags --> */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Reed" />
        <meta
          name="twitter:description"
          content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
        />
        <meta
          name="twitter:image"
          content="http://reedbarger.com/static/ca-styled-logo-5205dbb0983e1531d228c98584ab5711.png"
        />
      </Helmet>
      <div>{/* app content... */}</div>
    </main>
  );
}

이 게시물을 즐기십니까? 리액트 부트캠프에 참여하세요

The React Bootcamp은 React 학습에 대해 알아야 할 모든 것을 비디오, 치트 시트 및 특별 보너스를 포함하여 하나의 포괄적인 패키지로 묶습니다.

수백 명의 개발자가 이미 React를 마스터하고 꿈의 직업을 찾고 미래를 통제하는 데 사용한 내부 정보를 얻으십시오.


열릴 때 알림을 받으려면 여기를 클릭하십시오.