웹사이트에 구조화된 데이터를 추가하는 방법

아시다시피 Google의 사명은 "세계의 정보를 체계화하여 보편적으로 액세스하고 유용하게 만드는 것"입니다. 하지만 어떻게?

음, 2012년Google launched their Knowledge Graph, 인터넷의 콘텐츠를 더 잘 이해하기 위한 내부 시맨틱 네트워크, 사람 및 조직과 같은 엔터티가 어떻게 정의되고 서로 관련되는지.

개발자에게 이것이 필요한 이유는 무엇입니까?

당신이 프론트엔드 개발자라면 Google과 같은 검색 엔진이 당신의 웹사이트가 무엇인지 더 잘 이해하도록 돕는 방법이 궁금할 것입니다.

실제로 official Google documentation 과 같이 이를 수행하는 한 가지 방법은 웹사이트에 구조화된 데이터를 추가하는 것입니다.

Google Search works hard to understand the content of a page. You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page. Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.

Google uses structured data that it finds on the web to understand the content of the page, as well as to gather information about the web and the world in general.

자, 이제 코드

제 경우에는 구조화된 데이터를 my personal website에 추가하고 싶었습니다.

HTML에서 </body> 앞에 다음과 같이 <script> 데이터가 포함된 application/ld+json를 추가합니다.

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "email": "mailto:[email protected]",
      "image": "https://lugodev.com/img/avatar.jpg",
      "jobTitle": "Entrepreneur",
      "name": "Carlos Lugones",
      "givenName": "Carlos",
      "url": "https://lugodev.com",
      "birthDate": "1994-05-22",
      "affiliation": ["CubaPod", "Liduco", "Flowycart", "CubanValley", "Distribpod", "Ofendiditos.club"],
      "gender": "Male",
      "nationality": "Cuba",
      "sameAs" : [
          "https://twitter.com/lugodev",
          "https://t.me/lugodev",
          "https://linkedin.com/in/lugodev",
          "https://github.com/lugodev",
          "https://angel.co/u/lugodev"
      ],
      "contactPoint" : [
          {
              "@type" : "ContactPoint",
              "contactType" : "contact",
              "email": "[email protected]",
              "url": "https://lugodev.com/contact"
          }
      ]
    }
  </script>

변경 사항을 커밋하고 배포합니다. 변경 사항이 프로덕션에 적용된 후 this tool을 사용하여 웹 사이트가 데이터를 올바르게 반영하고 있는지 확인할 수 있습니다.



보시다시피 테스트를 실행하면 모든 데이터가 예상대로 표시됩니다.

더 많은 정보

데이터를 설명하는 데 사용되는 표준은 schema.org에서 사용할 수 있습니다.

이것이 유용하길 바랍니다. 즐거운 코딩하세요! 🚀

업데이트(2020년 12월 2일): Google에서 나에 대한 지식 패널을 생성했습니다. In this article , 전체 내용과 달성 방법에 대한 단계를 설명합니다.