[ HTML ] 오픈그래프 (Open Graph) - meta og 태그

✔️오픈그래프란?

웹페이지를 SNS로 공유할 때 보이는 미리보기를 설정합니다.

✔️왜 필요할까?

웹페이지의 공유 버튼 혹은 URL을 복사하여 SNS로 콘텐츠를 공유할 때,

콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정해줍니다.

최적화된 데이터로 표시된다면 사용자에게 더 좋겠죠?

✔️태그사용법

네이버 블로그, 카톡 미리보기 설정

<meta property="og:title" content="..."> // 콘텐츠 제목
<meta property="og:url" content="..."> // 웹페이지 URL
<meta property="og:type" content="..."> // 웹페이지 타입(blog, website 등)
<meta property="og:image" content="..."> // 표시되는 이미지
<meta property="og:site_name" content="..."> // 웹사이트 이름(URL과 다름)
<meta property="og:description" content="..."> // 웹페이지 설명(제목 아래에 표시)

 

트위터 미리보기 설정

<meta name="twitter:card" content="..."> // 트위터 카드 타입(요약정보, 사진, 비디오)
<meta name="twitter:title" content="..."> // 콘텐츠 제목
<meta name="twitter:description" content="..."> // 웹페이지 설명
<meta name="twitter:image" content="..."> // 표시되는 이미지)

 

모바일 앱 미리보기 설정 - iOS, Android

<meta property="al:ios:url" content="..."> // ios 앱 URL
<meta property="al:ios:app_store_id" content="..."> // ios 앱스토어 ID
<meta property="al:ios:app_name" content="..."> // ios 앱 이름

<meta property="al:android:url" content="..."> // 안드로이드 앱 URL
<meta property="al:android:app_name" content="..."> // 안드로이드 앱 이름
<meta property="al:android:package" content="..."> // 안드로이드 패키지 이름
<meta property="al:web:url" content="..."> // 안드로이드 앱 URL

 

✔️간단하게 meta 태그를 생성해주는 사이트

https://metatags.io/

Meta Tags — Preview, Edit and Generate

 

 

끗！

---

참고한 게시물
https://www.next-t.co.kr/blog/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-SEO-%ED%85%8C%ED%81%AC%EB%8B%88%EC%BB%ACSEO-%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-OpenGraph-metaogtag-%ED%8A%B8%EC%9C%84%ED%84%B0%EC%B9%B4%EB%93%9C-TwitterCards