Metadata

Metadata

웹 사이트의 컨텐츠를 title, description, image의 추상적인 형태로 보여주는 데이터이다.

 

Title

구글 크롤러가 페이지에 대한 분석을 할때 필요로 하는 중요한 SEO element중 하나이다.

키워드를 사용하면 검색엔진에서 좋은 랭킹을 받을 수 있다.

 

<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>

 

해당 타이틀은 유저들이 궁금해하는 수 많은 키워드를 담고 있어 SEO 점수를 높게 받을 수 있는 타이틀이라고 할 수 있다.

 

Description

title만큼은 아니지만 중요한 SEO element 중 하나이다. 구글에 의하면 description 은 검색 랭킹에 영향을 주진 않지만 검색 결과에서 클릭률을 높일 수 있다고 한다. title에서 마저 적지 못한 정보를 보충해주는 역할을 한다. 더 많은 키워드로 보충할 수 있다.

 

<meta
  name="description"
  content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>

 

search engine results page에선 위와 같이 노출된다

 

Open Graph (OG)

Open Graph Protocol - facebook이 개발했고 현재는 스탠다드가 되었다. URL을 공유할때 카드 형식으로 보여주는 기술이다.

OG태그는 SEO 관련 태그와 쓰임새가 비슷하지만 SEO 랭킹에는 영향을 주지는 않는다. 하지만 소셜 미디어나 메신저에서 콘텐츠를 공유할 때 미리보기 역할을 하게 도와준다.

 

<meta property="og:title" content="Social Title for Cool Page" />
<meta
  property="og:description"
  content="And a social description for our cool page"
/>
<meta
  property="og:image"
  content="https://example.com/images/cool-page.jpg"
/>

 

Structured Data and JSON-LD

Search Engine의 웹 페이지에 대한 분석을 수월하게 해주는 기술이다.

그동안 다양한 문법이 나왔지면 가장 많이 쓰는 문법은 schema.org 에서 나온 문법이다.

Search Engine 들은 매우 다양하기 때문에 그들이 이해하는 문법 또한 다르다. 모든 문법을 이해하는 Search Engine은 존재하지 않기 때문에 문법을 선택하는 것은 개발자의 몫이다.

 

import Head from 'next/head'

function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "<https://schema.org/>",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "<https://example.com/photos/1x1/photo.jpg>",
        "<https://example.com/photos/4x3/photo.jpg>",
        "<https://example.com/photos/16x9/photo.jpg>"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "<https://example.com/anvil>",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "<https://schema.org/UsedCondition>",
        "availability": "<https://schema.org/InStock>"
      }
    }
  `
    }
  }
  return (

 

references

https://nextjs.org/learn/seo/rendering-and-ranking/metadata

Learn | Next.js