[SEO] 미리보기 띄우기 (Open Graph)

메신저나 이런저런 포털사이트에 링크를 올리면, 이렇게 미리보기 화면이 뜨는 경우가 많다.
당연히 이런건 자동으로 알아서 생기는게 아니고, meta 태그에 적절한 작업을 해놓으면 해당 플랫폼의 크롤러가 잘 긁어서 보여주는 것이다.

당장 네이버 홈만 들어가봐도 수많은 메타값들의 향연이 펼쳐진다.

Open Graph

저런 미리보기 작업은 중구난방으로 써댄게 아니라 사실 페이스북이 만든 Open Graph라는 표준 규약에 의해 동작한다.
간단하게 정리하면 이렇다.

저 요소들에 맞게 메타값을 넣어주면 되는 것이다.
저것들 말고도 뭐가 엄청 많긴 한데, 저게 기본이다.
title은 제목, desc는 본문. url은 링크, image는 이미지다.

맞춰서 하나씩 넣어보자.

    <meta property="og:image" content="...">
    <meta property="og:title" content="...">
    <meta property="og:description" content="...">
    <meta property="og:url" content="...">

그럼 이렇게 잘 뜰 것이다.

참조
https://velog.io/@xodud5621/ReactSPA%EC%97%90%EC%84%9C-SNS%EA%B3%B5%EC%9C%A0-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-SEO%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95
https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/