SEO를 위한 JSON-LD(구조화 데이터 마크업) 적용하기

2023년 03월 02일

INDEX

  1. JSON-LD vs. Meta Tags
  1. JSON-LD를 적용하기 (feat. NextJS)


JSON-LD vs Meta Tags


JSON-LD에 대해 알아보게 된 계기


저는 기존에 제 블로그의 SEO를 위해서 많은 meta tag를 달았습니다. 하지만 구글에 search 했을 때 시간 정보가 제대로 나타나지 않는 것을 발견했습니다. 일반적으로 meta tag에 date 정보를 삽입하는 것으로는 인식을 못하더라고요.

그래서 알아본 결과 datePublished 태그를 삽입해야 했습니다. 구글은 JSON-LD를 더 잘 크롤링 한다고 하더라구요. 이제부터 JSON-LD에 대해 알아봅시다.


JSON-LD

JSON-LD와 메타 태그는 웹사이트에 구조화된 데이터를 추가하는 두 가지 방법입니다. 두 방법 모두 검색 엔진과 기타 웹 크롤러가 페이지의 콘텐츠를 이해하는 데 도움이 되는 방법을 제공하지만, 각 방법에는 고유한 장단점이 있습니다.

JSON-LD(JavaScript Object Notation for Linked Data)는 개발자가 스크립트 태그를 사용하여 구조화된 데이터를 HTML 문서에 직접 삽입할 수 있는 마크업 언어입니다. JSON-LD 사용의 주요 장점 중 하나는 매우 유연하고 복잡한 관계와 데이터 계층 구조를 설명하는 데 사용할 수 있다는 것 입니다. 따라서 리치 스니펫과 같은 고급 검색 기능에 이상적이며, 검색 결과에서 웹사이트를 돋보이게 하는 데 도움이 될 수 있습니다.

JSON-LD의 또 다른 장점은 메타 태그보다 유지 관리가 더 쉽다는 것입니다. JSON-LD는 HTML 코드에 직접 삽입되므로 콘텐츠 관리 시스템이나 기타 도구에 의해 실수로 삭제되거나 수정될 가능성이 작습니다.

하지만 JSON-LD 사용에는 몇 가지 단점도 있습니다. 한 가지 잠재적인 문제는 메타 태그보다 올바르게 구현하기가 더 어려울 수 있다는 것입니다. JSON-LD를 효과적으로 설정하고 사용하려면 일정 수준의 기술 전문 지식이 필요하며 코드에 오류가 있는 경우 디버깅하기가 어려울 수 있습니다.

메타 태그

반면 메타 태그는 제목, 설명, 작성자 등 웹 페이지에 대한 정보를 제공하는 HTML 요소입니다. 메타 태그 사용의 한 가지 장점은 구현하기 쉽고 페이지에 빠르고 쉽게 추가할 수 있다는 것입니다. 따라서 메타 태그는 제목과 설명 등 페이지에 대한 기본 정보를 제공하는 데 이상적입니다.

메타 태그 사용의 또 다른 장점은 JSON-LD보다 더 광범위하게 지원된다는 것입니다. 메타 태그는 HTML 표준의 일부이므로 다양한 브라우저와 검색 엔진에서 지원됩니다.

하지만 메타 태그 사용에는 몇 가지 단점도 있습니다. 한 가지 잠재적인 문제는 메타 태그의 기능이 제한될 수 있다는 것입니다. 메타 태그는 페이지에 대한 기본 정보를 제공하는 데 가장 적합하며, 고급 검색 기능에 필요한 수준의 세부 정보나 복잡성을 제공하지 못할 수 있습니다.

결론

결론적으로, JSON-LD와 메타 태그 모두 고유한 장단점이 있습니다. JSON-LD는 매우 유연하며 복잡한 관계와 데이터 계층 구조를 설명하는 데 사용할 수 있는 반면,

메타 태그는 구현하기 쉽고 광범위하게 지원됩니다.

궁극적으로 JSON-LD와 메타 태그 중 어떤 것을 선택할지는 웹사이트의 특정 요구 사항과 목표, 그리고 이를 구현하는 개발자의 기술 전문성에 따라 달라집니다.


JSON-LD를 적용하기 (feat. NextJS)


JSON-LD는 기본적으로 직렬화된 객체 형태로 html에 script 태그로 삽입 할 수가 있습니다. 간단히 적용해주는 next-seo 라이브러리가 존재하지만 저는 직접 만드는 방법을 사용하겠습니다.

기본 구조


import Head from "next/head";

const structuredData = {
  "@context": "http://schema.org", // 데이터가 Schema.org 어휘를 사용하여 설명되고 있음을 나타냅니다.
  "@type": "Organization",
  name: "Your Organization Name",
  url: "https://www.yourwebsite.com",
  logo: "https://www.yourwebsite.com/logo.png",
};

export default function StructuredData() {
  return (
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
    </Head>
  );
}

application/ld+json는 JSON-LD 형식임을 설명합니다. dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다.

일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해서 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다.

실제 제가 적용한 제 블로그 코드


const handleStructuredData = (customMeta) => {
  const structuredData: StructuredDataType = {
    "@context": "https://schema.org",
    "@type": "BlogPosting", // 웹의 타입
    headline: metadata.title, // 제목
    description: metadata.description, // 설명
    author: {
      "@type": "Person",
      name: metadata.author, // 저자
    },
    keywords: "blog, react, javascript, algorithm",
    url: metadata.url,
    publisher: {
      "@type": "Organization",
      name: "Kang Blog",
    },
    articleSection: "Technology",
    articleTag: "React",
  };

  if (customMeta) {
    structuredData.headline = customMeta.title;
    structuredData.description = customMeta.description;
    structuredData.datePublished = customMeta.date; // 작성 날짜
    structuredData.url = window.location.href;
  }

  return structuredData;
};

블로그 head


제가 적용할 웹사이트는 blog이기 때문에 @type 값에 BlogPosting을 주었습니다.

또한 home 화면은 metadata 객체에서 값을 가져오고 블로그 포스터 화면일 경우 customMeta 객체의 값을 사용하도록 변경해주었습니다.