[Meta / Open Graph] 오픈그래프 태그란? (Meta Tag 자동생성 사이트)

카카오 맵의 OG 태그

카카오톡 공유시 미리보기

OG(Open Graph) 태그
웹페이지가 소셜 미디어에서 어떻게 표시될지를 제어하는 메타 태그,
이를 통해 링크가 공유될 때 웹페이지의 제목, 설명, 이미지 등을 미리보기로 설정가능

 

 

주요 목적과 사용 이유

 

1. 소셜 미디어에서의 시각적 효과:
   OG 태그는 페이스북, 트위터, 카카오톡 등 소셜 미디어 플랫폼에서 링크가 공유될 때 어떻게 표시될지를 제어.
   예를 들어, og:image 태그는 링크를 공유할 때 표시되는 썸네일 이미지를 설정
   
   
2. 더 나은 사용자 경험:
   사용자가 소셜 미디어에서 링크를 클릭하기 전에 해당 링크의 내용을 미리 확인할 수 있도록 도와줌.
   (클릭률(CTR)이 증가)
   
   
3. 브랜드 일관성 유지:
   웹사이트나 페이지가 소셜 미디어에서 공유될 때 일정한 형식과 디자인을 유지할 수 있도록 함.
   (브랜드 이미지 관리에 도움)
   
   
4. SEO(검색 엔진 최적화)에는 직접적인 영향은 적지만 간접적인 효과:
   OG 태그 자체가 검색 엔진 최적화에 직접적인 영향을 미치는 것은 아니지만, 링크가 소셜 미디어에서 더 많이 공유되고 클릭될수록 트래픽이 증가할 수 있음 (간접적으로 SEO에 긍정적인 영향을 줌)

 

쉽게 말해 X,페북,카톡등에 링크 복붙했을때 나타나는

일련의 썸네일 이미지,글의 정보이다.

 

og태그의 종류가 정말 많고 방대하기 때문에,

내가 사용하는 기본og태그는 아래와 같다

📌 기본 og태그 

    <meta property="og:site_name" content="카카오맵">
    <meta property="og:title" content="카카오맵">
    <meta property="og:description" content="당신을 좋은 곳으로 안내 할 지도">
    <meta property="og:type" content="website">
    <meta property="og:image" content="img/썸네일.png">

 

 

 

 

 

📌 Meta Tag 자동생성 사이트

https://metatags.io/

Meta Tags — Preview, Edit and Generate

 

og태그에 들어갈 항목을 입력하면 Preview가 직관적으로 바뀌어서 편리하다

GET CODE 버튼을 누르면, 복사할 코드를 바로 보여주니 👍