Next.js/React.js에서 SEO 메타 태그, 서식 있는 텍스트, 표준 태그, Favicon 설정

9728 단어 webdevnextjsseojavascript

이 기사에서는 메타 태그, 표준 태그, 리치 텍스트 결과(마이크로데이터), Favicon + 보너스(Clarity)를 설정하는 방법을 보여줍니다.



우선 모든 SEO 관련 항목은 웹페이지<head>에 들어갑니다. Next.js를 사용하는 경우 기본적으로 콘텐츠를 페이지<Head>에 삽입하는 Next의 구성요소<head>입니다.

1. Twitter, Facebook, LinkedIn용 메타 태그(링크 미리 보기)



페이지에 제목 태그 추가



이것은 Google 및 대부분의 다른 검색 엔진이 검색 결과에 표시하는 페이지 제목입니다.

통사론

<title>This is the title of the page.</title>


페이스북, 링크드인

<meta property='og:title' content='···'>


트위터

<meta name='twitter:title' content='···'>


메타 설명 태그 추가



메타 설명은 페이지의 콘텐츠를 요약합니다. 검색 엔진은 종종 검색 결과의 스니펫에 이를 사용합니다.

통사론

<meta name="description" content="Place the meta description text here.">


페이스북, 링크드인

<meta property='og:description' content='···'>


트위터

<meta name='twitter:description' content='···'>


메타 이미지 태그 추가



링크 미리보기용 디스플레이 이미지(이상적인 해상도: 1200 x 630)

Facebook, Linkedin의 구문

<meta property="og:image" content="http://···">


트위터

<meta name="twitter:image" content="http://···">


표준 링크 태그 추가



표준 링크 요소는 웹마스터가 웹 페이지의 "표준"또는 "선호"버전을 지정하여 검색 엔진 최적화에서 중복 콘텐츠 문제를 방지하는 데 도움이 되는 HTML 요소입니다.

통사론

<link rel='canonical' href='http://···'>


페이스북, 링크드인

<meta property='og:url'  content='http://···'>


트위터

<meta name='twitter:url' content='http://···'>


메타 로봇 ​​태그 추가



메타 로봇 ​​태그는 검색 엔진에 웹 페이지를 크롤링해야 하는지 여부와 방법을 알려줍니다.

통사론

<meta name=”robots” content="index, follow">


메타 뷰포트 태그 추가



메타 뷰포트 태그는 웹 페이지의 가시 영역을 설정합니다. 다양한 화면 크기(예: 데스크톱/태블릿/모바일)에서 페이지를 렌더링하는 방법을 브라우저에 지시하는 데 사용됩니다.

통사론

<meta name="viewport" content="width=device-width, initial-scale=1.0">


메타 문자셋 태그 추가



메타 charset 태그는 웹 페이지의 문자 인코딩을 설정합니다. 즉, 웹 페이지의 텍스트가 표시되는 방식을 브라우저에 알려줍니다.

통사론

<meta charset="UTF-8">


웹 페이지에 대한 서식 있는 텍스트 결과(마이크로데이터) 설정



Next.js 및 기타 React.js 프로젝트에서 작동하는 JSON-D(application/ld+json) 스키마를 만드는 방법을 알아보세요.

Next.js(또는 모든 React 앱)에서 JSON-LD 데이터를 렌더링하려면 다음을 사용해야 합니다.
  • <script> 요소입니다.
  • dangerouslySetInnerHTML 속성입니다.
  • JSON.stringify 메서드(직렬화용)입니다.

    • 이와 유사하게 구성된 HTML JSON-LD 스키마가 있다고 가정해 보겠습니다.

    <script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "Product", 
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": " I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}
</script>


    이 JSON-LD 스키마가 Next.js에서 작동하도록 하려면 먼저 HTML<script> 태그를 제거하여 JSON-LD 개체만 남도록 합니다.

    그런 다음 JSON-LD 개체를 다음과 같이 변수에 할당합니다.

    const schemaData = 
{
  "@context": "https://schema.org/", 
  "@type": "Product", 
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": "I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}


    이제 schemaData 변수를 JSON.stringify()로 직렬화해야 합니다.

    JSON.stringify(schemaData)


    마지막으로 JSON.stringify(schemaData) 요소 내에 dangerouslySetInnerHTML 속성의 개체 값으로 <script>를 추가하여 브라우저에서 렌더링합니다.

    <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
  />


    헷갈린다면 이 튜토리얼의 코드를 기반으로 한 완전한 페이지 예제가 있습니다. 모든 Next.js/React 웹사이트에서 작동해야 합니다.

    import React from 'react';

const schemaData = 
{
  "@context": "https://schema.org/", 
  "@type": "Product", 
  "name": "Name of service",
  "image": "https://somewebsite.com/static/images/some-image.jpg",
  "description": "I seek the means to fight injustice. To turn fear against those who prey on the fearful. Someone like you. Someone who'll rattle the cages. My anger outweighs my guilt.",
  "brand": "Company Name",
  "review": {
    "@type": "Review",
    "name": "Company Name ",
    "reviewBody": "It was a dog. It was a big dog. It's not who I am underneath but what I do that defines me. Well, you see... I'm buying this hotel and setting some new rules about the pool area.",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5"
    },
    "datePublished": "2020-04-06",
    "author": {"@type": "Person", "name": "Emma"}
  }
}

const SomePage = () => {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <div>Your content</div>
    </>
  );
};

export default SomePage;


    파비콘 설정



    먼저 선택한 파비콘 생성기로 이동하십시오.
    응용 프로그램의 공용 폴더 루트에 파비콘 파일을 생성하고 페이지<head> 태그에 다음 코드를 입력합니다.

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">


    Clarity, Google 태그 관리자 등과 같은 서비스 설정



    서식 있는 텍스트 결과를 설정하는 것과 매우 유사합니다.

    <script
  async
    type="text/javascript"
      dangerouslySetInnerHTML={{
        __html: `;(function(c, l, a, r, i, t, y) {
           c[a] =
              c[a] ||
                function() {
                  ;(c[a].q = c[a].q || []).push(arguments)
                }
                t = l.createElement(r)
                t.async = 1
                t.src = "https://www.clarity.ms/tag/" + i
                y = l.getElementsByTagName(r)[0]
                y.parentNode.insertBefore(t, y)
              })(window, document, "clarity", "script", "KEY_ID")`
            }}
></script>


    추가 보너스 비밀
    meta 제목, 설명, 이미지와 같은 일부 값을 동적으로 만들 수도 있습니다. 정말 좋은 사용 사례의 예로는 각 페이지가 다르기 때문에 고유한 정보가 필요한 블로그 게시물 페이지가 있습니다.

    읽어주셔서 감사합니다 😜
    삽입 삭제 GetRandom O(1)
    JS Promise는 모나딕입니다. 예상한 방식이 아닙니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage