카카오톡으로 링크를 보내면 이상하게 나오는데, 이거 어떻게 변경할 수 있나요?
웹사이트 개발을 완료하고 나면, 종종 고객으로부터 받는 질문이다. 재밌는 글이나 유용한 자료가 있다면 본인의 메신저 혹은 지인에게 공유한 경험은 한 번씩은 있을 것이다. 단순히 URL만 나오던 예전과 달리, 많은 앱과 서비스에서 해당 링크에 대한 미리보기를 제공하고 있다. 이런 미리보기 기능을 제공하는 것이 OpenGraph Protocol인데, 줄여서 오픈 그래프(Open Graph)라고 부른다.
위는 네이버 링크를 메신저로 보냈을 때 나타나는 미리보기 화면이다. URL을 받았을 때 텍스트로는 현재 웹페이지가 어떤 역할을 하는지 파악하기 어렵기 때문에, 이미지, 제목, 설명으로 간단한 정보를 제공한다. 내용 자체는 쉽지만, 웹 퍼블리셔 혹은 프론트-엔드 개발자라면 반드시 알고 있어야 하는 항목 중 하나다.
미리보기 화면을 꾸미기 위해 쓰이는 태그가 OG Tag (OpenGraph MetaTag) 다. OG Tag는 웹페이지에 대한 정보를 입력해서 사용하는데, 대표적인 샘플 코드는 다음과 같다.
<html>
<head>
<!-- 웹페이지의 제목 -->
<meta property="og:title" content="네이버" />
<!-- 웹페이지 설명 -->
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요."/>
<!-- 웹페이지 URL -->
<meta property="og:url" content="https://naver.com" />
<!-- 웹페이지 이미지 -->
<meta property="og:image" content="https://naver.com/images/og.jpg" />
</head>
<body>...</body>
</html>
위 태그만 입력한다면 링크 공유 시, 위 이미지와 동일한 정보를 나타낼 수 있다. 적용할 때 OG Image로 사용하는 이미지는 1200x630 사이즈를 권장한다. 더 자세한 정보는 아래 링크에서 확인할 수 있다.
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
OpenGraph가 잘 적용되었는지 확인하기 위해 본인 메신저에 링크를 보내면 캐시가 남아있을 경우 변경 확인이 어려울 수 있다. 그래서 아래 사이트에서 링크를 입력하여 확인하면 쉽게 확인할 수 있다.
OpenGraph - Preview Social Media Share and Generate Metatags
OpenGraph is the easiest way to preview and generate open graph meta tags for any website.
www.opengraph.xyz
해당 링크로 접속하면 아래와 같은 화면이 뜨는데, 검색창에 샘플 주소를 입력해보자. 여기서 참고할 점은 http가 아닌 https, 즉 SSL 인증서가 적용된 사이트여야 검색이 가능하다.
입력창에 네이버 주소를 입력하고, Check Website 버튼을 누르면 다음과 같은 화면이 출력되고, OT Tag가 잘 적용되었는지 확인이 가능하다.
Edit 파트는 실시간으로 입력 값을 바꿔볼 수 있고, Code 파트는 코드를 복사해서 가져갈 수 있다. 마지막으로 Preview는 대표적인 사이트에 어떤 식으로 공유가 되는지 확인해볼 수 있다.
'Road to Web Developer > 알.쓸.개.잡' 카테고리의 다른 글
| 아토믹 디자인Atomic Design 개요 (0) | 2022.09.17 |
|---|---|
| 웹 개발자가 알아두면 좋은 SPA, MPA (0) | 2020.10.15 |
| 티스토리 블로그, 네이버 검색에 나타나게 적용하기 (2) | 2020.09.26 |
| 웹 퍼블리셔로 입문하기 위해 도움이 되는 사이트 3선 (0) | 2020.09.23 |
| 동기와 비동기의 개념 (1) | 2019.01.18 |
