고정 헤더 영역
상세 컨텐츠
본문
개인프로젝트를 리팩토링 하던 중 링크 공유시 미리보기에 정보가 너무 없다는 생각이 들어 Open Graph를 적용해봤다.
적용하는 과정을 정리해보고자 한다. 😎
처음엔 이렇게 아무것도 없어서 이게 무슨 링크인지 확인이 불가능했다. (뭔가 수상함...🤔)
특히 나는 개발자 오픈카톡에 내 프로젝트 링크를 자주 공유하는 편이라 어떤 사이트인지 정보가 잘 나타나있어야 사람들이 조금이나마 더 관심을 가질 것이라고 생각했다.
Open Graph를 적용하기 전에 무엇인지부터 알아보자!
Open Graph(OG)
Open Graph 사이트에 나온 설명은 아래와 같다
오픈그래프 프로토콜은 페이스북에서 처음 만들어졌으며, Dublin Core, link-rel canonical, Microformats, 그리고 RDFa로부터 영감을 받았습니다. 이 페이지의 설계서는 버전 0.9의 Open Web Foundation Agreement 아래에서 사용 가능합니다. 이 웹사이트는 오픈소스이며, 2014년 10월 20일에 최종 업데이트 되었습니다.
Open Graph는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.
✔️ 참고
RDFa는 웹페이지의 HTML 또는 XML 요소의 속성에 PDF 표현을 삽입하여 정보를 표현하는데 이를 사용하기 위해서는 웹페이지의 <head> 요소 내에 추가적인 <meta>태그를 사용해야한다고 한다.
⚙️ 원리
플랫폼에 URL을 붙여 넣는 순간 미리 해당 웹사이트를 크롤러가 먼저 방문해서 HTML Head의 메타 데이터를 크롤링하여 미리보기 화면을 생성한다.
⚙️ 좀 더 자세한 원리
1. 사용자가 링크를 입력창에 입력한다.
2. 페이스북, 카카오톡은 입력창의 문자열이 링크라는 것을 파악한다(정규표현식으로 해당 문자열이 링크라는 것을 파악)
3. 링크 임을 파악 후 페이스북, 카카오톡 등의 크롤러는 미리 그 웹사이트를 방문해서 HTML head의 오픈 그래프(Open Graph) 메타 데이터를 긁어온다.
4. 메타 데이터 중 og:title, og:description, og:image가 각각 제목, 설명,이미지의 정보를 나타낸다.
5. 그리고 그 정보를 바탕으로 미리 화면을 생성해준다.
✔️ Basic Metadata
우리의 웹페이지를 그래프 개체로 바꾸려면 페이지에 기본 메타데이터를 추가해야한다.
기본적인 메타 데이터로는 title, description, image, url이 있다.
og:title - 그래프 내에 표시되어야 하는 개체의 제목
og:type - 개체의 유형(지정하는 유형에 따라 다른 속성이 필요할 수도 있다.)
og:image - 그래프 내에서 개체를 나타내야 하는 이미지 URL
og:url - 그래프에서 영구 ID로 사용될 개체의 표준 URL
예시
<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
이외에도 많은 메타데이터 속성들이 있는데 자세한 정보는 Open Graph 사이트에서 확인 할 수 있다.
적용하기
<!-- index.html -->
<head>
...
<meta
property="og:image"
content="https://find-my-cat.netlify.app/images/cat.webp"
/>
<meta property="og:title" content="내게 맞는 고양이 찾기" />
<meta
property="og:description"
content="나와 맞는 고양이는 어떤 유형일까?"
/>
...
</head>
적용 후 배포도 정상적으로 됐는데 반영이 안 된다...🤨🤨
이유는 바로 '캐싱' 때문!
✔️ 캐싱(Caching)
반복적으로 호출되는 특정한 데이터를 캐시 메모리의 임시로 저장하여 다음 번에 호출될 때 빠르게 해당 데이터를 공급해주는 것
보통 모든 웹서비스, 앱들에는 이러한 캐싱 시스템이 구축되어 있다.
일반적으로 이런 캐싱에는 TTL(Time-to-Live)라는 소멸시효가 걸려있는데, 이 소멸시효가 지나지 않은 경우 이미 캐싱된 데이터를 참조해서 불러올 수 있다.
이러한 이유로 TTL이 만료되기 전까지는 수정사항이 미리보기에 반영되지 않는다.
이런 경우 때문에 캐싱을 리로드할 수 있는 기능을 지원하는 경우가 있다.
🧹 페이스북의 공유디버거 캐싱 초기화 버튼
🧹 카카오의 공유디버거 캐시 초기화 버튼
캐시 초기화하기
카카오 디벨로퍼 > 도구 > 디버거 도구 > 공유 디버거 > 캐시 초기화 클릭
초기화 후 테스트해보니 미리보기에 잘 반영되는 것을 확인할 수 있었다. 😎
느낀점
어떻게 보면 당연한 얘기일 수 있지만
개발한 서비스가 사용자의 이목을 끌기 위해선 오픈그래프의 이미지나 문구 또한 신경써서 적용해야한다고 느꼈다.
나만 해도 어디선가 링크를 받았을 때 그 링크가 무슨 사이트의 링크인지 알지 못하면 흥미가 떨어지기 때문이다.
💫 프로젝트 보러가기
https://find-my-cat.netlify.app
내게 맞는 고양이 찾기
나와 맞는 고양이는 어떤 유형일까?
find-my-cat.netlify.app
Reference
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
https://blog.ab180.co/posts/open-graph-as-a-website-preview
AB180 Blog | 링크의 미리보기 제목, 설명, 이미지를 결정하는 open graph 태그
링크의 미리보기 제목, 설명, 이미지를 결정하는 open graph 태그에 대해 알아보자
blog.ab180.co
'Programming > 기타' 카테고리의 다른 글
| 개인 프로젝트 개선 기록 (2) | 2024.01.25 |
|---|---|
| 로컬환경에서 메타태그 테스트하기(ngrok 사용) (0) | 2024.01.24 |
| [ESLint] vite+React+TS 프로젝트 세팅 시 린트 오류 해결하기 (1) | 2024.01.12 |
| [Netlify] React 프로젝트 배포하기 + Page Not Found 에러 해결 (0) | 2023.10.10 |
| [ESLint] 'module' is not defined 해결법(React+TypeScript+Tailwind 환경) (0) | 2023.07.14 |
댓글 영역