제목부터 답을 부르고 시작하는 싱거운 글입니다.
오픈 그래프, 들어보셨나요?
아니면 og:image 이런 태그는 보신 적 있으신가요?
일반적인 웹사이트를 카카오톡이나 페이스북/트위터 등에 공유하면 (티스토리도 마찬가지) 나는 URL만 그대로 갖다붙였을 뿐인데 저절로 페이지의 내용과 제목, 그리고 썸네일까지 불러올 때가 있습니다. 작성자는 따로 이 내용에 대해 설명할 필요가 없어지죠!
네 이것이 og 태그입니다.
평소에 접속하는 사이트에서 개발자도구 혹은 소스보기 탭에서 <head> 태그 속의 <meta> 태그들을 살펴보세요.
메타태그는 HTML 문서의 <head> 태그 내에 입력하는 특수한 태그로, 사이트의 디자인이나 기능에는 거의 영향을 미치지 않고, 해당 문서가 어떤 내용을 담고 있고, 문서의 주요 키워드는 무엇이며, 누가 만들었는지 어떤 이미지로 페이지를 설명할 수 있을지 등의 문서 자체의 특성을 담고 있습니다.
제가 지금 듣고 있는 유튜브 음악 영상의 메타태그를 보여드릴게요.
<meta name="theme-color" content="rgba(255, 255, 255, 0.98)" />
<meta name="title" content="이하이 (LeeHi) - [4 ONLY] Live Performance Day 1" />
<meta name="description" content="이하이 (LeeHi), [4 ONLY] Live Performance Day 1-https://aomgofficial.lnk.to/4ONLY00:00 ONLY04:12 그대의 의도07:47 구원자11:29 물타기14:40 Bye[4 ONLY] Live Performance Day ..." />
<meta name="keywords" content="이하이, LeeHi, LEE HI, hayi, AOMG, aomg, 아옴그, 힙합, hiphop, kpop, KPOP, leehi, only, ONLY, 비아이, B.I, BI, bi, 구원자, Savior, savior, 4ONLY, 4 ONLY, 빨간립스틱, 빨간 립스틱, 립스틱, Red Lipstick, Lipstick, 윤미래, yoonmirae, t yoonmirae, 박재범, jaypark, Jay Park, 사이먼 도미닉, 쌈디, 삼디, simond, 코드쿤스트, 코쿤, codekunst, CODE KUNST, 코드 쿤스트, 로꼬, loco, Loco, LOCO, 정찬성, korean zombie, Korean Zombie, 코좀, 코리안좀비, Lip J, lipj, 립제이, LipJ" />
<meta property="og:site_name" content="YouTube" />
<meta property="og:url" content="https://www.youtube.com/watch?v=fF4UF6VaBSc" />
<meta property="og:title" content="이하이 (LeeHi) - [4 ONLY] Live Performance Day 1" />
<meta property="og:image" content="https://i.ytimg.com/vi/fF4UF6VaBSc/maxresdefault.jpg" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta property="og:description" content="이하이 (LeeHi), [4 ONLY] Live Performance Day 1-https://aomgofficial.lnk.to/4ONLY00:00 ONLY04:12 그대의 의도07:47 구원자11:29 물타기14:40 Bye[4 ONLY] Live Performance Day ..." />
<meta property="al:ios:app_store_id" content="544007664" />
<meta property="al:ios:app_name" content="YouTube" />
<meta property="al:ios:url" content="vnd.youtube://www.youtube.com/watch?v=fF4UF6VaBSc&feature=applinks" />
<meta property="al:android:url" content="vnd.youtube://www.youtube.com/watch?v=fF4UF6VaBSc&feature=applinks" />
<meta property="al:web:url" content="http://www.youtube.com/watch?v=fF4UF6VaBSc&feature=applinks" />
<meta property="og:type" content="video.other" />
<meta property="og:video:url" content="https://www.youtube.com/embed/fF4UF6VaBSc" />
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/fF4UF6VaBSc" />
<meta property="og:video:type" content="text/html" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta property="al:android:app_name" content="YouTube" />
<meta property="al:android:package" content="com.google.android.youtube" />
<meta property="og:video:tag" content="이하이" />
<meta property="og:video:tag" content="LeeHi" />
<meta property="og:video:tag" content="LEE HI" />
<meta property="og:video:tag" content="hayi" />
<meta property="fb:app_id" content="87741124305" />
<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@youtube" />
<meta name="twitter:url" content="https://www.youtube.com/watch?v=fF4UF6VaBSc" />
<meta name="twitter:title" content="이하이 (LeeHi) - [4 ONLY] Live Performance Day 1" />
<meta name="twitter:description" content="이하이 (LeeHi), [4 ONLY] Live Performance Day 1-https://aomgofficial.lnk.to/4ONLY00:00 ONLY04:12 그대의 의도07:47 구원자11:29 물타기14:40 Bye[4 ONLY] Live Performance Day ..." />
<meta name="twitter:image" content="https://i.ytimg.com/vi/fF4UF6VaBSc/maxresdefault.jpg" />
<meta name="twitter:app:name:iphone" content="YouTube" />
<meta name="twitter:app:id:iphone" content="544007664" />
<meta name="twitter:app:name:ipad" content="YouTube" />
<meta name="twitter:app:id:ipad" content="544007664" />
<meta name="twitter:app:url:iphone" content="vnd.youtube://www.youtube.com/watch?v=fF4UF6VaBSc&feature=applinks" />
<meta name="twitter:app:url:ipad" content="vnd.youtube://www.youtube.com/watch?v=fF4UF6VaBSc&feature=applinks" />
<meta name="twitter:app:name:googleplay" content="YouTube" />
<meta name="twitter:app:id:googleplay" content="com.google.android.youtube" />
<meta name="twitter:app:url:googleplay" content="https://www.youtube.com/watch?v=fF4UF6VaBSc" />
<meta name="twitter:player" content="https://www.youtube.com/embed/fF4UF6VaBSc" />
<meta name="twitter:player:width" content="1280" />
<meta name="twitter:player:height" content="720" />자 여러분 이 사이트를 직접 보지 않으셨지만 어떤 영상이고, 어떤 아티스트의 작업물인지, 관련된 키워드는 어떤 것이 있는지 너무 투명하게 다 보이죠??? 우리가 어떤 URL을 직접 복사해 카카오톡이나 블로그 등에 올렸을 때, 그 URL이 해당 서버에서 처음으로 공유된 경우(혹은 크롤러 데이터를 보관하지 않는 경우) 이렇게 메타태그를 슥삭 읽어오는 기능으로 정보들을 주섬주섬 주워옵니다. 항상 크롤러를 구동하고 있는 검색엔진 서버들은 이런 데이터들을 평소에 수집해 검색 결과로 보여줘야 하기 때문에 이 복잡한 태그에서 필요한 정보만 읽어오는 것에 특화되어 있습니다. 예를 들면, 어떤 검색어로 도출된 검색 결과를 이미지 검색에 띄울 때, 가로로 긴 그림인지 세로로 긴 그림인지 혹은 고화질의 파일인지도 미리 알아두면 꼼꼼한 검색결과를 제공할 수 있듯이요.
여기까지는 평소에 알고 계셨을 수도 있겠네요. 아니면 검색 중에 이미 먼저 접한 사실일 수도 있구요. 그런데 만약에, 해당 URL에서 어떤 정보를 읽어오기 힘든 상황이라면 어떨까요? 사이트에서 meta 태그를 텅텅 비워뒀을 수도 있고 말이죠.
그런 경우에 서버가 어떻게 대처하는지 가장 잘 보여줄 수 있는 도구가 페이스북의 공유 디버거인 것 같습니다.
해당 유튜브 영상은 og 태그가 너무 많았죠? 이번엔 제 프로젝트 페이지를 공유해볼게요.
혼났습니다.
미리보기만 보더라도, 이 사이트를 페이스북에 공유하면 사람들이 들어와보고 싶은 생각이 들지 않겠죠????????
경고 중에 첫번째 줄에선 이런 얘기를 하네요. "추정할 수 있는 값이더라도"
페이스북 외에도 많은 웹서버들이 이렇게 url을 스크랩할 때 어떻게든 페이지 안의 요소들의 중요도를 가려 썸네일로 사용할 수 있을 만한 이미지를 추려내어 og:image의 빈자리를 메우려고 합니다. 이것을 추정할 수 있는 값이라고 하는 것이구요.
그러니까 어떤 사이트의 경우 og:image 태그가 없더라도 해당 사이트에서 배경이미지 등으로 쓰인 이미지를 제외하고 용량이 제일 큰 이미지라던가, 처음 페이지가 풀로딩 됐을 때 보이는 대표적인 이미지라던가, 나름의 알고리즘을 통해 스크랩 될 것이라는 것입니다.
하지만 모든 웹서버가 페이스북처럼 근성 있는 추리력을 가진 스크랩 알고리즘을 가지고 있는 것은 아닐테니까, 웹개발자는 og태그들을 잘 채워줘야 합니다. 위의 유튜브 영상처럼 지나치다 싶을 정도로 많은 수의 og 태그들을 트위터/페이스북/앱용으로 준비해둘 수도 있지만, og:image, og:title, og:description만 잘 해놓아도 반 이상은 먹고 들어갑니다.
- Open Graph 이미지
<meta name="og:image" content="./thumbnail.jpg">
URL 링크를 올렸을 때, 카카오톡, 페이스북, 네이버 등등 크롤러가 URL을 미리 들어가 정보를 수집할 경우
메타데이터에 오픈그래프로 지정되어 있는 이미지를 메인 이미지로 표시합니다. - Open Graph 제목
<meta name="og:title" content="오늘 뭐 먹지??">
URL 링크를 올렸을 때, 카카오톡, 페이스북, 네이버 등등 크롤러가 URL을 미리 들어가 정보를 수집할 경우
메타데이터에 오픈그래프로 지정되어 있는 title 정보를 긁어와 표시합니다.
(지정되어 있는 <title>태그의 내용보다 우선적으로 표시하게 됩니다.) - Open Graph 설명
<meta name="og:description" content="퇴근 전에 슬쩍 배달 맛집 탐방하기!! 날씨와 기분에 맞춰 꺼내먹어요">
URL 링크를 올렸을 때, 카카오톡, 페이스북, 네이버 등등 크롤러가 URL을 미리 들어가 정보를 수집할 경우
메타데이터에 오픈그래프로 지정되어 있는 description 정보를 긁어와 표시합니다.
(지정되어 있는 <description>요소의 내용보다 우선적으로 표시하게 됩니다.)
페이스북의 경우 og:image 태그에 대해 명확한 가이드라인을 제시하고 있습니다.
- 고해상도 기기에서 최상의 크기와 화질로 표시되려면 너비가 최소 1080픽셀인 이미지를 사용합니다. 이미지 링크 광고를 표시하려면 최소한 너비가 600픽셀인 이미지를 사용해야 합니다. 광고 크리에이티브에서는 이미지 링크 광고가 더욱 잘 보일 수 있도록 1:1 이미지로 사용하는 것이 좋습니다.
- URL 공유 디버거 도구를 통해 URL을 실행하여 웹사이트의 메타데이터를 미리 가져와 이미지를 미리 캐시할 수 있습니다. 콘텐츠의 이미지를 업데이트하는 경우에도 이 작업을 수행해야 합니다.
- 비동기적으로 다운로드하고 처리할 필요 없이 즉시 렌더링하도록 og:image:width와 og:image:height 오픈 그래프 태그를 사용하여 크롤러에 이미지 크기를 지정합니다.
화질 좋고 비율 잘 맞는 썸네일이 페이스북 공유에서 유리할 수 있다는 얘기입니다.
오늘도 저는 하고싶은 이야기만 실컷 하고 튑니다 그럼 안녕히 계세요 질문과 토론은 언제든 환영입니다 :D
'HTMLCSS' 카테고리의 다른 글
| 내가 만든 웹사이트, 잘 만든걸까? 객관적으로 어떨까? lighthouse + thinkwithgoogle (0) | 2021.10.03 |
|---|---|
| [CSS] 스크롤 따라다니는 사이드 바 만들기 (display: sticky) (0) | 2021.09.25 |
| [CSS+JS] 클릭하면 페이지 최상단으로 이동하는 버튼! 단, 부드~럽게! (0) | 2021.09.24 |
댓글