SEO 친화적인 블로그 구축: Nuxt에 스키마 및 오픈 그래프 프로토콜 추가

이 시리즈의 이전 기사에서는 마크다운과 서론을 사용하여 콘텐츠가 풍부한 기사를 만드는 방법을 다루었습니다. 이 시리즈의 마지막 부분에서는 스키마와 Open Graph 프로토콜을 사용하여 검색 엔진이 콘텐츠를 이해하도록 돕는 방법을 보여 드리겠습니다.

콘텐츠 유형이 무한하고 유사해 보일 수 있는 콘텐츠 유형이 많기 때문에 검색 엔진이 웹사이트에서 전달하려는 정보를 이해하는 것이 어려울 수 있습니다. 이를 돕는 한 가지 방법은 페이지 콘텐츠의 스키마를 문서화하는 것입니다. Schema.org은 article , recipe 또는 다른 유형의 콘텐츠인지 여부에 관계없이 웹사이트에서 구조화된 데이터를 정의하는 방법을 보여줍니다. 표준 스키마 형식에는 RDFa, Microdata 및 JSON-LD가 포함됩니다.

스키마를 정의하는 가장 빠르고 이해하기 쉬운 방법 중 하나인 JSON-LD에 중점을 둘 것입니다. 지난 회에서 기억하신다면, 우리 기사의 앞부분에 상당한 양의 메타데이터를 정의했습니다.

---
slug: dogs
title: 'Dogs are the Best Animal - Fight Me'
date: '2020-09-25'
tags: dogs,doggo,pupper,floofer,woofters
description: "Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong."
---

# Dogs are the Best Animal - Fight Me

Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong.

All doggos are a heckin' good fren. Anyone who disagrees is a monster.

이 메타데이터를 사용하여 기사의 JSON-LD를 채울 수 있습니다. 시작하려면 먼저 Nuxt용 플러그인nuxt-jsonld을 설치해야 합니다. 프로젝트 디렉터리 내에서 npm i nuxt-jsonld 명령을 실행합니다. 이 플러그인을 사용하려면 jsonld 페이지에 _slug.vue 기능을 추가해야 합니다.

jsonld () {
  return {
    '@context': 'http://schema.org',
    '@type': 'Article',
    author: 'Jessie Barnett',
    headline: this.markdown.attributes.title,
    tags: this.markdown.attributes.tags,
    wordcount: this.markdown.html.split(' ').length,
    datePublished: this.markdown.attributes.date,
    description: this.markdown.attributes.description,
    proficiencyLevel: this.markdown.attributes.proficiencyLevel,
    dependencies: this.markdown.attributes.dependencies
  }
}

markdown 에서 asyncData 객체를 정의했기 때문에 템플릿 및 this 범위의 다른 함수에서 사용할 수 있습니다. 이것은 우리가 JSON-LD로 우리 기사를 설명하기 위해 우리의 머리말 메타데이터를 사용할 수 있다는 것을 의미합니다.
generate 명령을 실행하면 함수에서 생성한 JSON-LD와 함께 HTML 문서의 head 태그에 application/ld+json 유형의 스크립트가 추가됩니다.

이제 JSON-LD를 설정했으므로 Open Graph 프로토콜로 이동하겠습니다. Open Graph protocol은 주로 소셜 미디어 네트워크에서 사용됩니다. Open Graph 프로토콜을 사용하면 소셜 미디어에서 기사에 대한 링크를 더 쉽게 찾을 수 있고 해당 사이트에서 설명, 이미지 등을 지정하여 기사에 대한 더 자세한 미리보기를 생성할 수 있습니다.

기사 페이지에 Open Graph 프로토콜 메타태그를 추가하기 위해 Nuxt에서 제공하는 head 기능을 사용하여 페이지별 구성을 지정할 수 있습니다.

 head () {
  return {
    title: `${this.markdown.attributes.title}`,
    meta: [
      { hid: 'description', name: 'description', content: this.markdown.attributes.description },
      { property: 'og:title', content: `${this.markdown.attributes.title}` },
      { property: 'og:url', content: `https://your-domain.com${this.$route.fullPath}` },
      { property: 'og:description', content: this.markdown.attributes.description },
      { property: 'og:type', content: 'article' },
      { property: 'article:author', content: 'https://your-domain.com' },
      { property: 'article:publisher', content: 'https://your-domain.com' },
      { property: 'article:published_time', content: this.markdown.attributes.date },
      { property: 'article:tag', content: this.markdown.attributes.tags }
    ]
  }
}

이제 정적 사이트에 JSON-LD 및 Open Graph 프로토콜을 추가했으므로 우리 기사는 검색 엔진에서 쉽게 색인을 생성하고 소셜 미디어 사이트에서 찾을 수 있습니다. 이제 SEO 친화적인 블로그를 만드는 방법을 알았으므로 디자인 기술을 사용하여 멋진 사이트를 만드는 일만 남았습니다!

GitHub 에서 튜토리얼 코드의 최종 버전을 볼 수 있습니다.

원래 발행일jessie.codes