[HTML5] OG (Open Graph)태그

티스토리 뷰

HTML5 | CSS3

[HTML5] OG (Open Graph)태그

서스포PAR 2022. 5. 13. 12:38

내가 만들 사이트의 썸네일과 제목을 설정하는 것을 인강에서 배웠다.

하지만 정확한 이론을 알지 못하고 따라한 것이기에

이번 기회에 더 깊게 배울 수 있도록 공부하기로 하였다.

🎁 하나하나 천천히 뜯어보고 알아보자! 🎁

💖 OG (Open Graph) 란?

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

미리보기가 가능한 정보를 노출해준다 = 미리보기 화면 생성

오픈그래프 (OG, 오픈 그래프 프로토콜) 는 어떤 HTML문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜

🔊 (오픈 그래프) 프로토콜

프로토콜(Protocol)은 컴퓨터나 네트워크 장비가 서로 통신하기 위해 미리 정해놓은 약속, 규약.
즉, 컴퓨터끼리 서로 이해할 수 있는 공용언어에 대한 통신 규약(약속)

대표적으로 인터넷을 할 때 프로토콜은 TCP/IP가 있다.

📑 OG 데이터 작동 원리

URL 링크를 올렸을 때, 사이트의 크롤러가 URL을 미리 들어가 정보를 수집할 경우,

메타데이터(meta태그)에 오픈그래프(OG)로 지정되어 있는 title, description, 이미지 등의 정보를 긁어와 표시한다.

📌 기본적인 메타 데이터

대표적으로 제목(title), 설명(description), 대표이미지(image), 표준 링크(url)이 있다.
여기서 표준 링크란, 같은 콘텐츠를 가리키는 여러 개의 URL중에서 대표 URL을 말한다. 원칙적으로 하나의 대상은 단 하나의 링크만으로 참조되어야 하기 때문이다.

🪄 OG (Open Graph) 설정 방법

HTML 작성 시, meta태그를 통해 설정해 줄 수 있다.

<!DOCTYPE html> 
  <html> 
    <head lang="en"> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 
      <!-- og tag 정의 -->
      
      <!-- 카드에 표시하고 싶은 제목 -->
      <meta property="og:title" content="초간단 mac사용 설명"/> 
      <!-- 카드에 표시하고 싶은 이미지 -->
      <meta property="og:image" content="https://ih3.img.jpg"/> 
      <!-- 표시하고싶은 url주소 -->
      <meta property="og:url" content="https://www.youtube/mac..."/>
      <!-- 카드에 표시하고 싶은 설명 -->
      <meta property="og:description" content="mac을 이렇게 쉽게..."/> 
  </head> 
  <body> - </body> 
</html>

- 공유시 나오는 이미지의 사이즈는 1200 x 630px을 권장하며 1.91:1의 비율을 유지해주는 것이 좋다.
- 만약 수정이 이루어졌을 경우, 해당 내용이 바뀌지 않는 경우가 있다. 이유는, 캐싱(Cashing)때문이다.

❗ 캐싱(Caching)

- 반복적으로 호출되는 특정한 데이터를 캐시 메모리에 임시로 저장하여 다음 호출 때 더 빨리 해당 데이터를 공급해주는 기능이다.

- 소멸시효가 걸려있는데, 이 소멸시효가 지나지 않은 경우, 계속적으로 이미 캐싱된 데이터를 참조해서 불러올 수 있다.

- 따라서 실제 서버에서 내려주는 html웹문서 상의 오픈그래프(OG)는 바뀌었을지라도, 이미 캐시된 웹문서가 내려지고 있는 상황일 수있다. (즉, 캐시 소멸시효가 만료되기 전까지는 아무리 서버에서 개발자가 다시 개발해줘도 미리보기는 바뀌지 않는다)

'HTML5 | CSS3' 카테고리의 다른 글

[ CSS3 ] 미디어 쿼리 (Media Query) + 각 디바이스 (0)	2022.09.21
[CSS3] 텍스트 줄 바꿈 💥텍스트 자르기 (0)	2022.05.26
[CSS3] 스크롤바 커스텀(Scrollbar Custom) (0)	2022.05.12
[HTML5] HTML 태그 정리 (0)	2022.03.21
Flexbox & CSS grid 이란? (0)	2021.12.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

서스포PAR_개발블로그

티스토리 뷰