지킬에 오픈그래프 이미지 추가하기
블로그 엔진으로 지킬(Jekyll)을 쓰고 있는데 아쉬운 점은 많다. 생각보다 자잘한 노력이 많이 들어가기 때문에 어느 정도 시간의 허비가 있는 편이다.
페이스북에 링크를 올렸을 때 썸네일 이미지가 뜨길 원해 살펴보니 지킬의 몇가지 개념을 이해하고 템플릿을 수정할 필요가 있었다.
블로그 글 상단에 아래와 같이 정보를 넣는다고 가정해보자.
---
layout: post
title: "지킬에 오픈그래프 이미지 추가하기"
date: 2022-11-18 16:00:00 +0900
categories: blog
---
(중략)
여기에 항목 하나 image를 추가했다.
---
layout: post
title: "지킬에 오픈그래프 이미지 추가하기"
date: 2022-11-18 16:00:00 +0900
categories: blog
image: jkog.png
---
(중략)
image란 항목을 넣었고 jkog.png는 /assets/jkog.png 이미지다.
이 image는 page.image를 통해 참고할 수 있다.
이렇게 page.image를 정의한 이후 테마인 _includes/head.html을 수정했다. 아래의 내용을 참고하라.
<title>지킬에 오픈그래프 이미지 추가하기</title>
<meta name="description" content="블로그 엔진으로 지킬(Jekyll)을 쓰고 있는데 아쉬운 점은 많다. 생각보다 자잘한 노력이 많이 들어가기 때문에 어느 정도 시간의 허비가 있는 편이다.">
<meta property="og:type" content="article" />
<meta property="og:url" content="https://dalinaum.github.io/tool/2022/11/18/jekyll-og.html">
<meta property="og:title" content="지킬에 오픈그래프 이미지 추가하기" />
<meta property="og:description" content="블로그 엔진으로 지킬(Jekyll)을 쓰고 있는데 아쉬운 점은 많다. 생각보다 자잘한 노력이 많이 들어가기 때문에 어느 정도 시간의 허비가 있는 편이다." />
<meta property="og:image" content="https://dalinaum.github.io/assets/jkog.png" />
og:로 시작하는 항목들은 다 내가 추가한 것이다.
og:url 항목을 먼저 살펴보자.
<meta property="og:url" content="https://dalinaum.github.io/tool/2022/11/18/jekyll-og.html">
page.url 뒤에 다음에 해야할 일이 | 파이프를 기준으로 나열되어 있다. replace:'index.html',''는 가져온 page.url에서 index.html을 찾아 ''로 바꾸겠다는 뜻이다. prepend는 앞에 무엇을 붙이는 것이다. prepend: site.baseurl는 replace된 결과물 앞에 site.baseurl을 붙이게된다. 그리고 마지막으로 prepend: site.url을 통해 site.url을 앞에 붙인다.
site.url은 도메인이 붙은 주소가 된다고 보면 되고 site.baseurl는 블로그를 서브 디렉토리 같은 것을 통해 운영할 때 쓰게 된다고 보면 된다. site.baseurl은 대부분 사용자와는 상관없다 생각하지만 관습상, 그리고 다른 사용자가 써도 문제가 없게 그렇게 구성했다.
다음으로 og:title을 구성하자.
<meta property="og:title" content="지킬에 오픈그래프 이미지 추가하기" />
og:title을 설정했는데 page.title이 있으면 그걸 쓰고, 없으면 site.title를 쓰도록 했다.
og.description을 살펴보자.
<meta property="og:description" content="블로그 엔진으로 지킬(Jekyll)을 쓰고 있는데 아쉬운 점은 많다. 생각보다 자잘한 노력이 많이 들어가기 때문에 어느 정도 시간의 허비가 있는 편이다." />
page.excerpt가 있을 경우와 없을 경우가 다르다. excerpt는 발췌, 인용등의 의미이다. 포스트의 내용 일부를 의미한다. 이후 | 파이프로 연결된 내용을 보면 strip_html HTML을 스트립한다는 의미니 HTML을 제거한다는 의미다. strip_newlines는 뉴라인을 스트립한다는 의미이니 뉴라인을 제거한다는 뜻이다. truncate: 160는 160자로 자르겠다는 뜻이고.
만약에 가져올 포스트 인용이 없다면 site.description을 통해 사이트 설명을 적었다.
og:image
<meta property="og:image" content="https://dalinaum.github.io/assets/jkog.png" />
og:image 항목은 page.image가 있을 경우만 추가했다.
pretend:를 쓸 수 있겠지만 중간에 /assets/라고 하드 코딩한 것도 있어서 https://dalinaum.github.io/assets/jkog.png로 쭉 나열했다. assets에 있다고 가정하고 image: jkog.png라고 블로그 포스트 상단에 적으면 https://dalinaum.github.io/assets/jokg.png로 합성이 된다.