개발

구글 검색 상위 순위를 위한 리치 스니펫 작성

6 views as of February 5, 2025.

JSON-LD, 리치 스니펫
실제 코드 작성
"@context": "https://schema.org"
"@type": "BlogPosting"
"mainEntityOfPage": { ... }
"headline": "블로그 글 제목"
"description": "블로그 글의 요약 설명 또는 메타 설명"
"image": "https://www.example.com/images/your-blog-post-image.jpg"
"author": { ... }
"publisher": { ... }
"datePublished": "2023-05-01T08:00:00+09:00"
"dateModified": "2023-05-02T10:00:00+09:00"
라라벨 뷰단에 적용한 예제 코드
리치 스니펫 검증

검색엔진을 위해서 우리는 각종 SEO에 필요한 메타정보를 페이지 상단에 배치해서 사용한다.

대표적으로 SNS 공유를 위한 오픈그래프(Open Graph, OG)도 이런 메타 정보 중 하나이다.

그중 구글 검색엔진에 특화된 메타정보가 있는데 이를 '구조화된 데이터(Structured-data)'라고 하고 리치 스니펫이라 지칭한다.

요는 구글 검색엔진에게 내 사이트 페이지가 어떤 정보를 담고있는지 구조화해서 전달하는 일종의 데이터 구조체라고 볼 수 있다.

JSON-LD, 리치 스니펫

이런 구조화 데이터는 여러가지 방법(Microdata, RDfa 등)이 있었는데 현재는 구글에서 제일 권장하는 방법이 JSON-LD 방식이다.

이 방식은 HTML 코드내에 <script type="application/ld+json"> 태그 단락을 추가하는 형태로 기존의 HTML 요소와 별도로 독립적인 데이터 블록을 제공하기 때문에 추가, 변경, 삭제등의 관리와 유지보수가 용이하다.

이런 구조화된 데이터, 리치 스니펫은 여러 스키마 유형을 가지는데 여기서는 블로그 글에 특화된 BlogPosting 스키마에 대해 알아보고자 한다.

BlogPosting은 Article 스키마의 하위 유형으로서 블로그 게시글에 적합한 스키마 유형이다.

문서 스키마 마크업 자세히 알아보기 | Google 검색 센터 | Google for Developers

뉴스 기사와 블로그에 기사 스키마 마크업을 추가하면 Google 검색결과에 이러한 항목이 표시되는 방식이 어떻게 개선되는지 알아봅니다.

https://developers.google.com/search/docs/appearance/structured-data/article?hl=ko

해당 스키마 유형에 대해서는 위의 문서에서 더 자세히 알아볼 수 있다.

실제 코드 작성

거두절미하고 실제 적용법부터 알아보고자 한다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.example.com/blog/your-blog-post-url"
  },
  "headline": "블로그 글 제목",
  "description": "블로그 글의 요약 설명 또는 메타 설명",
  "image": "https://www.example.com/images/your-blog-post-image.jpg",
  "author": {
    "@type": "Person",
    "name": "작성자 이름"
  },
  "publisher": {
    "@type": "Organization",
    "name": "블로그 사이트 이름",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.example.com/images/logo.png"
    }
  },
  "datePublished": "2023-05-01T08:00:00+09:00",
  "dateModified": "2023-05-02T10:00:00+09:00"
}
</script>Copy

일반적으로 블로그 포스팅 스키마는 위의 구조에 맞춰서 내용을 채워넣어주면된다.

여기서 건드려야할 값이 있고 건드리면 안되는 값이 있는데 각행에 대해 알아보면서 어디를 수정하고 어디를 놔둬야할지 알아보고자 한다.

"@context": "https://schema.org"

[수정 불가] 이 데이터가 지정된 사이트의 스키마 구조를 따른다는걸 명시적으로 적어놓는 구문이다.

당연하겟지만 수정하면 안된다.

"@type": "BlogPosting"

[수정 불가] 우리는 블로그 포스팅 형식의 스키마를 쓰기로 했으므로 위 예제코드에서 이부분은 수정하면 안된다.

만약에 지정된 스키마말고 다른 구조를 쓴다면 당연히 이부분도 바꿔야할 것이다.

"mainEntityOfPage": { ... }

[수정 필요] 해당 페이지 내용이 본 페이지의 주된 내용임을 명시하는 구문이다.

하위 속성으로는 "@type"과 "@id"가 있는데 @type은 [수정불가]고 @id는 현재 게시글의 url을 기록해주면된다.

"headline": "블로그 글 제목"

[수정 필요] 해당 블로그 게시글의 제목을 나타낸다.

이부분은 meta title에서 사용하는 글 제목을 그대로 적어주면 된다.

"description": "블로그 글의 요약 설명 또는 메타 설명"

[수정 필요] 마찬가지로 블로그글의 요약본을 적어주면 된다.

meta description 과 같은 역할을 수행한다.

"image": "https://www.example.com/images/your-blog-post-image.jpg"

[수정 필요] 해당 게시글의 대표 이미지(Featured Image)의 경로를 입력해준다.

대표 이미지가 없다면 삭제해도 된다.

"author": { ... }

[수정 필요] 게시자의 간략한 정보가 담기는 단락이다.

@type은 게시자의 유형으로 Person 그대로 놔두면 되고, name은 작성자의 이름을 기재해주면 된다.

"publisher": { ... }

[수정 필요] 게시글의 발행기관에 대한 내용을 담은 단락이다.

내부 옵션은 @type, name, logo 등이 있는데 @type은 유형 선언이므로 건드리면 안되고 나머지 영역은 맞게 내용을 기입해주면된다.

"datePublished": "2023-05-01T08:00:00+09:00"

[수정 필요] 게시글이 최초로 등록된 시간을 기재하면된다.

"dateModified": "2023-05-02T10:00:00+09:00"

[수정 필요] 게시글이 수정되거나 업데이트 된 시간을 기재하면된다.

라라벨 뷰단에 적용한 예제 코드

실제로 나는 아래와같이 $post 모델에서 빼온 정보를 리치 스니펫에 넣어 서비스 하고 있다.

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "{{ url()->current() }}"
        },
        "headline": "{{ $post->getTitle() }}",
        "description": "{{ $post->getDescription() }}",
        "image": "{{ $post->image ?: '/web-app-manifest-512x512.png' }}",
        "author": {
            "@type": "Person",
            "name": "에루샤"
        },
        "publisher": {
            "@type": "Organization",
            "name": "에루라보",
            "logo": {
                "@type": "ImageObject",
                "url": "/favicon-96x96.png"
            }
        },
        "datePublished": "{{ $post->created_at->toIso8601String() }}",
        "dateModified": "{{ $post->updated_at->toIso8601String() }}"
    }
</script>Copy