BLOG
Html,Css,JavaScript

오픈그래프 속성을 통해 웹페이지 미리보기 만들기

Jan. 23, 2022, 11:34 p.m.

html에서 head태그 안의 meta 태그에서는 여러가지 페이지에 대한 중요한 정보를 담고 있습니다. 이번에는 그 중에서 오픈그래프 속성에 대해서 알아보겠습니다.

1. 오픈그래프란?

보통 웹페이지를 공유할 때는 링크를 복사해서 공유합니다. 카카오톡이나 다른 메신저, SNS를 통해 웹페이지를 공유해 본 경험이 다들 있으실 텐데요, 이때 분명히 링크만 복사해서 보냈는데 웹페이지의 미리보기랑 제목, 주요내용들이 추가되어 보내진 적이 있으실 겁니다. 바로 아래처럼요!

이것은 바로 해당 웹페이지의 오픈그래프 속성 때문에 자동으로 만들어 집니다.

덕분에 공유시에 페이지를 미리볼 수 있어 그 페이지에 대한 신뢰도도 높아지고 정보를 더 잘 전달 할 수 있습니다.

그럼 오픈그래프 속성을 웹페이지에 추가하는 방법을 알아보겠습니다.

2. 오픈그래프 속성 추가하기

<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="..."> // 웹페이지 이름
<meta property="og:description" content="..."> // 웹페이지 설명

예를 들어 아래와 같이 만든다면 어떨까요? 제 블로그의 오픈그래프 속성입니다.

<meta property="og:title" content="
[인공지능]로지스틱 회귀(Logistic Regression) (2) 모델을 평가하고 규제를 통해 성능 높이기">
<meta property="og:description" content="
이전 포스트에서 로지스틱 회귀 모델에 대해서 알아보고 사이킷런을 이용해서 훈련 데이터를 받아와 로지스틱 회귀 모델을 …">
<meta property="og:type" content="website"> 
<meta property="og:image" content="/static/blog/title.png">

그러면 링크 공유시에 아래와 같은 미리보기를 얻게 됩니다.

요즘은 SNS를 통해서 웹페이지 공유를 굉장히 많이 하기 때문에 이러한 오픈그래프 속성은 선택이 아닌 필수가 되어가고 있습니다. 블로그같은 페이지를 운영하시는 분이라면 꼭 이 속성을 추가해서 사이트에 대한 신뢰도와 클릭율을 높여보세요.

특히 네이버 서치 어드바이저와 같은 검색엔진 색인 서비스에서도 오픈 그래프 속성을 필수로 요구하고 있으니 참고하시기 바랍니다.

오픈그래프 og 네이버서치어드바이저

Html,Css,JavaScript 의 다른 글 보기
Search