2023. 3. 12. 23:17ㆍHTML5 | CSS3
내가 만들 사이트의 썸네일과 제목을 설정하는 것을 인강에서 배웠다.
하지만 정확한 이론을 알지 못하고 따라한 것이기에
이번 기회에 더 깊게 배울 수 있도록 공부하기로 하였다.
🎁 하나하나 천천히 뜯어보고 알아보자! 🎁
💖 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) + 각 디바이스 (1) | 2023.03.12 |
|---|---|
| [CSS3] 텍스트 줄 바꿈 💥텍스트 자르기 (1) | 2023.03.12 |
| [CSS3] 스크롤바 커스텀(Scrollbar Custom) (0) | 2023.03.11 |
| [CSS3] -webkit-tap-highlight-color (0) | 2023.03.11 |
| [CSS3] Flexbox & CSS grid 이란? (0) | 2023.03.11 |