[HTML] OG 태그, Open Graph 알아보기

OG태그 설정하기 

 

🩸이슈 발생

웹 페이지 링크를 네이버 블로그에 올렸을 때 뜨는 사진을 변경해 달라고 하셨다.

그것도 제가 할 수 있는 거였나요..? 파비콘 설정하는 곳으로 가봐야 할 것 같아서 일단 헤더로 갔다.

 

728x90

 

---

🩹이슈 해결

1. Header 에 적혀있던 meta 태그 발견

og:image가 의심됐다.

구글링 후 새롭게 알게된 og태그 속성

 

2. og 태그란?

Open Graph, SNS 게시할 때 보이는 웹 콘텐츠 내용. 헤드 태그 안에 작성된다.

og:type	웹 페이지 타입
og:title	웹 사이트 이름
og:description	웹 페이지 설명
og:image	표시 이미지

 

3. 이미지 및 내용 수정 적용

네이버 블로그에 뜨는 웹사이트 링크

카카오톡에 뜨는 웹사이트 링크

 

4. 적용성공!

 

---

💡유의사항

OG태그 설정 전에 이미 올라가 있던 글은 적용되지 않는다.