기록

OG 메타태그 적용 및 캐시 삭제 본문

TIL*

OG 메타태그 적용 및 캐시 삭제

mnmhbbb 2024. 7. 30. 22:03

Open Graph

  • 웹 페이지의 내용을 소셜 미디어 플랫폼에 잘 표시하기 위한 메타데이터를 제공하는 방법
  • 사용자가 웹 페이지 링크를 소셜 미디어에 공유하면 해당 플랫폼의 봇이 해당 웹 페이지를 크롤링하고,
  • 크롤러는 페이지의 OG태그를 파싱하여 특정 정보 (ex. title, image, description)를 추출하여 공유된 링크 미리보기에서 표시됨
<!DOCTYPE html>
<html lang="ko_KR">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="manifest" href="manifest.json" />
    <link rel="manifest" href="install.webmanifest" />
    <link rel="apple-touch-icon" sizes="192x192" href="/assets/icons/icon-192x192.png" />
    <link rel="apple-touch-icon" sizes="256x256" href="/assets/icons/icon-256x256.png" />
    <link rel="apple-touch-icon" sizes="384x384" href="/assets/icons/icon-384x384.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/assets/icons/icon-512x512.png" />
    <!-- Primary Meta Tags -->
    <title>abc</title>
    <meta name="title" content="abc" />
    <meta name="description" content="그래도 해야지 어떡해" />
    <meta property="og:locale" content="ko_KR" />
    <meta property="og:site_name" content="abc" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://abc-vue-pwa.vercel.app" />
    <meta property="og:title" content="abc" />
    <meta property="og:description" content="그래도 해야지 어떡해" />
    <meta property="og:image:width" content="1280" />
    <meta property="og:image:width" content="800" />
    <meta property="og:image" content="https://abc-vue-pwa.vercel.app/assets/icons/og.png" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://abc-vue-pwa.vercel.app" />
    <meta property="twitter:title" content="그래도 해야지 어떡해" />
    <meta property="twitter:description" content="그래도 해야지 어떡해" />
    <meta property="twitter:image" content="https://abc-vue-pwa.vercel.app/assets/icons/og.png" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

따라서 og image는 로컬 파일 시스템 경로를 사용할 수 없고, 웹에서 접근 가능한 URL이어야 적용이 된다.

 

참조: https://velog.io/@seul06/Dynamic-Open-Graph-cd7aupmv

 

Dynamic Open Graph

Open Graph / 정적 오픈그래프와 동적 오픈그래프 / Next.js에서 getServerSideProps로 오픈그래프 설정하기

velog.io

 

 

각 소셜에서 캐시를 삭제하여 최신 코드를 적용하기

 

트위터:

https://cards-dev.twitter.com/validator

 

X

 

twitter.com

 

카카오톡

https://developers.kakao.com/tool/debugger/sharing

 

카카오계정

 

accounts.kakao.com

 

페이스북

https://developers.facebook.com/tools/debug

 

공유 디버거 - Meta for Developers

공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.

developers.facebook.com

 

 

출처: https://gildev.tistory.com/27 [Next Dev Gil:티스토리]

 

 

+) 

TODO: SPA에서 각 페이지에 대해 OG 메타태그 적용하기

저작자표시

'TIL*' 카테고리의 다른 글

모바일 환경의 콘솔로그를 pc에서 확인하기(Mac, iPhone)  (0) 2024.08.19
개발모드에서 Supabase Service Role Key 임시 사용하기  (0) 2024.08.17
Usage Error: This project is configured to use yarn  (0) 2024.07.09
Next.js 기본 프로젝트 셋업(Pnpm)  (0) 2024.04.10
인증번호 input 개선해보기(numeric, 자동입력 등)  (0) 2024.03.21
'TIL*' Related Articles more
Comments