Hexo

오픈 그래프 (Open Graph) 태그와 페이스북 도메인 인사이트 (Domain Insight)

🗓 ⏰ 소요시간 36 분

오픈 그래프 (Open Graph) 태그

이번 포스팅에서는 오픈 그래프 태그에 대해 알아보겠습니다.

https://developers.facebook.com/tools/debug/sharing

우리가 보통 페이스북이나 카카오톡에서 웹 사이트 URL을 공유할 때를 생각해봅시다. 그러면 해당 URL의 제목, 이미지, 내용 등이 미리보기 형식으로 잘 보이는 페이지가 있는 반면, 어떤 사이트는 이미지가 없거나 이상한 이미지가 잡히고 내용도 제대로 보이지 않는 미리보기가 표시됩니다. 두 차이는 바로 오픈 그래프 태그에 있습니다.

한 마디로 표현하자면 웹 사이트의 URL 링크 공유 시 미리보기를 만들 때 사용하는 태그입니다. 페이스북에서 정의한 메타 태그라고 합니다. 현재는 페이스북 뿐만 아니라 트위터, 카카오톡 등 다양한 곳에서 사용되고 있습니다.

잘 만든 블로그를 공유할 때 미리보기가 이상하다면 클릭하지 않을 확률이 높겠죠? 최적화된 품질로 표시될 수 있도록 메타 태그를 손봐야합니다.

확인하기

먼저 현재 페이지는 어떻게 되어있는지 살펴보겠습니다.

브라우저의 개발자 도구

크롬 브라우저에서 마우스 오른쪽 클릭해서 검사를 눌러서 맨 위쪽의 <head> 태그를 살펴봅시다. 다음은 제 포스트 소스 중 일부입니다. 이름, 태그, 키워드, 설명 등 해당 페이지에 대한 내용들이 담겨 있습니다. 웹 페이지를 수집하는 검색 엔진 크롤러가 이런 메타태그를 참조해서 페이지를 분석하게 됩니다. 이런 메타 태그 중에 property 가 og인 태그들이 있습니다. 또 twitter나 facebook 으로 되어있는 것들도 있네요. 바로 우리가 찾던 오픈 그래프 태그입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="web,blog,google,search,analytics">
    <meta name="description" content="이번 포스팅에서는 구글에서 우리 Hexo 블로그가 잘 검색되도록 해보겠습니다. 일단 사이트부터 등록을 하고 검색엔진 최적화를 위한 다양한 기술을 살펴보겠습니다.
검색 최적화구글이나 네이버는 수많은 웹사이트를 수집해서 검색 시 결과를 보여줍니다. 이렇게 수집하는 작업을 크롤링이라고 합니다. 아무리 열심히 쓰고 내용이 좋다 하더라도 검색이 안되서 조회수가 없">
	<meta property="og:type" content="article">
	<meta property="og:title" content="구글(Goolge) 사이트 등록(Search Console)과 검색엔진 최적화(SEO)">
	<meta property="og:url" content="http://futurecreator.github.io/2016/06/15/hexo-google-site-serach-console-analytics/index.html">
	<meta property="og:site_name" content="Writer, IT Blog">
	<meta property="og:description" content="이번 포스팅에서는 구글에서 우리 Hexo 블로그가 잘 검색되도록 해보겠습니다. 일단 사이트부터 등록을 하고 검색엔진 최적화를 위한 다양한 기술을 살펴보겠습니다.
검색 최적화구글이나 네이버는 수많은 웹사이트를 수집해서 검색 시 결과를 보여줍니다. 이렇게 수집하는 작업을 크롤링이라고 합니다. 아무리 열심히 쓰고 내용이 좋다 하더라도 검색이 안되서 조회수가 없">
	<meta property="og:image" content="http://futurecreator.github.io/images/google_search/analytics.png">
	<meta property="og:updated_time" content="2016-06-15T10:28:42.000Z">
	<meta name="twitter:card" content="summary">
	<meta name="twitter:title" content="구글(Goolge) 사이트 등록(Search Console)과 검색엔진 최적화(SEO)">
	<meta name="twitter:description" content="이번 포스팅에서는 구글에서 우리 Hexo 블로그가 잘 검색되도록 해보겠습니다. 일단 사이트부터 등록을 하고 검색엔진 최적화를 위한 다양한 기술을 살펴보겠습니다.
검색 최적화구글이나 네이버는 수많은 웹사이트를 수집해서 검색 시 결과를 보여줍니다. 이렇게 수집하는 작업을 크롤링이라고 합니다. 아무리 열심히 쓰고 내용이 좋다 하더라도 검색이 안되서 조회수가 없">
	<meta name="twitter:image" content="http://futurecreator.github.io/images/google_search/analytics.png">
	<meta name="twitter:creator" content="@future_go">
	<meta property="fb:admins" content="100001774570174">
	<link rel="canonical" href="http://futurecreator.github.io/2016/06/15/hexo-google-site-serach-console-analytics/">
	<link rel="icon" href="/images/favicon.png">

페이스북 URL 디버거

페이스북 크롤러가 우리 페이지를 어떻게 볼 지, 다른 사람들에게 공유할 때 어떻게 보일지 미리보는 사이트가 있습니다. 페이스북 URL 디버거 를 사용하면 개발자 도구로 소스를 열어보는 것보다 오픈 그래프 태그를 쉽게 분석할 수 있습니다.

https://developers.facebook.com/tools/debug/sharing/

URL을 입력하고 디버깅을 시작하면 해당 페이지의 미리보기도 나오고, 메타 태그만 뽑아서 보여줍니다. 수정해야할 부분이 있다면 경고를 통해 알려주니 참고해서 수정하시면 됩니다.

기본적인 오픈 그래프 태그

수정하기 전에 기본적인 오픈 그래프 태그만 간략하게 살펴보겠습니다.

Tag Description
og:url 페이지의 표준 URL (데스크탑 URL)
og:title 콘텐츠 제목
og:description 콘텐츠 설명. 미리보기에서 제목 아래에 표시
og:site_name 웹 사이트의 이름 (주소 아님)
og:image 콘텐츠를 공유 시 표시되는 이미지의 URL
fb:app_id 페이스북 인사이트를 사용하기 위한 앱 아이디
fb:admins 웹 사이트용 도메인 인사이트를 사용하기 위한 아이디

Hexo 에서 오픈 그래프 태그 추가하기

다행히 Hexo 와 Hueman 테마에서 웬만한 오픈 그래프 태그는 자동으로 만들어줍니다. 소스를 까보시면 헤더 쪽에 다음과 같은 함수로 오픈 그래프 태그를 생성하고 있습니다.

1
<%- open_graph([options]) %>
Option Description Default
title 페이지 제목 (og:title) page.title
type 페이지 타입 (og:type) blog
url 페이지 URL (og:url) url
image 페이지 커버 이미지 (og:image) 첫번째 이미지
site_name 사이트 이름 (og:site_name) config.title
description 페이지 설명 (og:desription) 내용의 200자
twitter_card 트위터 카드 타입 (twitter:card) summary
twitter_id 트위터 아이디 (twitter:creator)
twitter_site 트위터 사이트 (twitter:site)
google_plus Google+ 프로필 링크
fb_admins Facebook admin ID
fb_app_id Facebook App ID

Hueman 테마에서는 _config.yml 에서 오픈 그래프 태그 관련 옵션을 줄 수 있습니다.

1
2
3
4
5
6
7
# Miscellaneous
miscellaneous:
    open_graph: # see http://ogp.me
        fb_app_id:
        fb_admins:
        twitter_id:
        google_plus:

트위터, 구글 플러스

트위터와 구글 플러스 아이디를 넣으면 관련 태그를 자동으로 생성해서 넣어줍니다. 제 트위터 아이디인 @future_go 를 입력하면 다음과 같은 태그가 생성됩니다. @ 는 제외하고 입력합니다.

1
2
3
4
5
6
<meta name="twitter:card" content="summary">
	<meta name="twitter:title" content="구글(Goolge) 사이트 등록(Search Console)과 검색엔진 최적화(SEO)">
	<meta name="twitter:description" content="이번 포스팅에서는 구글에서 우리 Hexo 블로그가 잘 검색되도록 해보겠습니다. 일단 사이트부터 등록을 하고 검색엔진 최적화를 위한 다양한 기술을 살펴보겠습니다.
검색 최적화구글이나 네이버는 수많은 웹사이트를 수집해서 검색 시 결과를 보여줍니다. 이렇게 수집하는 작업을 크롤링이라고 합니다. 아무리 열심히 쓰고 내용이 좋다 하더라도 검색이 안되서 조회수가 없">
	<meta name="twitter:image" content="http://futurecreator.github.io/images/google_search/analytics.png">
	<meta name="twitter:creator" content="@future_go">

저는 구글 플러스를 사용하지 않아서 입력하지 않았지만, 구글 플러스도 마찬가지로 아이디를 입력하면 관련된 메타 태그를 생성해줍니다.

페이스북 도메인 인사이트 (Facebook Domain Insight)

이제 페이스북 관련 태그를 넣어봅시다. 페이스북 AppId 와 admins 라는 항목이 있는데 이걸 넣지 않아도 공유할 때는 문제가 없습니다. 이건 페이스북 인사이트 라는 서비스를 위한 항목입니다. 구글 애널리틱스 (Google Analytics) 처럼 페이스북 상에서 공유되는 내 웹사이트의 통계를 내주는 서비스입니다.

페이스북 인사이트 에 접속하시면 앱과 페이지, 도메인 세 가지 종류가 있습니다. 우리는 외부 사이트이므로 도메인 인사이트에 도메인 추가 로 우리의 사이트를 등록합니다.

https://www.facebook.com/insights

1
<meta property="fb:admins" content="12345678" />

사이트 추가를 누르면 위와 화면 처럼 메타 태그에 입력하라고 fb:admins 고유번호가 표시됩니다. 사이트를 입력하고 고유 번호는 복사해서 _config.yml 에 붙여넣습니다.

1
2
3
4
miscellaneous:
    open_graph: # see http://ogp.me
        fb_app_id: # 앱인 경우
        fb_admins: 12345678 # 도메인인 경우

대시보드에서 등록한 URL을 누르면 페이스북 인사이트라는 통계 서비스를 사용할 수 있습니다. 저는 페이스북을 거의 하지 않지만, 언젠가 페이스북에서 제 사이트가 돌아다니는 걸 봤으면 좋겠네요 ㅎㅎ

홈페이지의 메인 사진이 없다?

그런데 공유를 하려고 보니, 포스트의 경우 해당 포스트의 이미지가 미리보기에 잘 표시가 되는데 홈페이지의 경우 해당하는 이미지가 없어서 미리보기에 아무것도 표시되질 않더군요. 수정하려고 홈페이지에 이미지를 여기저기 넣어봤지만 먹질 않았습니다. 결국 코드를 까볼 수 밖에 없었죠.

메타 태그를 만드는 부분을 찾아봅시다. Hueman 테마에서는 head.ejs 에서 open_graph() 함수를 이용해서 오픈 그래프 태그를 만들고 있었습니다. 'head.ejs는 저번 포스트에서 대표 URL 메타 태그를 자동으로 추가할 때 잠깐 봤었죠. 오픈 그래프 함수를 보시면 thumbail 이라는 함수를 통해og:image` 태그를 만들고 있습니다.

head.ejs
1
2
3
4
5
6
7
<%- open_graph({
          image:          thumbnail(page),
          fb_app_id:      theme.miscellaneous.open_graph.fb_app_id,
          fb_admins:      theme.miscellaneous.open_graph.fb_admins,
          twitter_id:     theme.miscellaneous.open_graph.twitter_id,
          google_plus:    theme.miscellaneous.open_graph.google_plus,
      }) %>

thumbnail 은 Hueman 테마에서 사용하는 자체적인 함수군요. 여기서 보면 post 변수가 넘어오는데 여기서 thumbnail 이 없으면 이미지 태그를 검색해서 thumbnail 을 만들어줍니다. 이미지도 없으면 빈 스트링을 리턴하는데, 우리의 홈페이지가 이 경우에 해당하겠네요.

thumbnail.js
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
/**
* Thumbnail Helper
* @description Get the thumbnail url from a post
* @example
*     <%- thumbnail(post) %>
*/
hexo.extend.helper.register('thumbnail', function (post) {
    var url = post.thumbnail || '';
    if (!url) {
        var imgPattern = /\<img\s.*?\s?src\s*=\s*['|"]?([^\s'"]+).*?\>/ig;
        var result = imgPattern.exec(post.content);
        if (result && result.length > 1) {
            url = result[1];
        }
        if(url.length > 0) {
            var pattern = /^[\\{0,1}\/{0,1}]([^\/^\\]+)/,
                pattern_ = /([^\/^\\]+)/;
            if ((ret = pattern.exec(url)) != null) {
                if(ret[0].length == url.length) {
                    url = post.path + ret[1];
                }
            } else if ((ret = pattern_.exec(url)) != null) {
                if(ret[0].length == url.length) {
                    url = post.path + ret[1];
                }
            }
        }
    }
    return url;
});

그래서 thumbnail.ejs 에서 thumbnail url 이 없으면 카메라 모양의 이미지로 표시하게 됩니다.

thumbnail.ejs
1
2
3
4
5
6
7
8
9
10
11
<a href="<%- url_for(post.link ? post.link : post.path) %>" class="thumbnail">
    <% var thumbnailUrl = thumbnail(post) %>
    <% if (thumbnailUrl) { %>
        <span style="background-image:url(<%- thumbnailUrl %>)" alt="<%= post.title %>" class="thumbnail-image"></span>
    <% } else { %>
        <span class="thumbnail-image thumbnail-none"></span>
    <% } %>
    <% if (typeof(counter) !== 'undefined' && counter) { %>
        <%- partial('comment/counter') %>
    <% } %>
</a>

이 문제를 해결하기 위한 방법은 여러가지가 있을 수 있겠지만, thumbnail.js 를 변경하기 보다는 그냥 head.ejs를 수정하는게 낫겠네요. 홈페이지인 경우에 thumbnail() 함수를 타지 않고 특정 이미지를 넣도록 수정하겠습니다.

head.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<% if (is_home()) { %>
      <%- open_graph({
            image:          '/images/keyboard.JPG',
            fb_app_id:      theme.miscellaneous.open_graph.fb_app_id,
            fb_admins:      theme.miscellaneous.open_graph.fb_admins,
            twitter_id:     theme.miscellaneous.open_graph.twitter_id,
            google_plus:    theme.miscellaneous.open_graph.google_plus,
        }) %>
    <% } else { %>
    <%- open_graph({
          image:          thumbnail(page),
          fb_app_id:      theme.miscellaneous.open_graph.fb_app_id,
          fb_admins:      theme.miscellaneous.open_graph.fb_admins,
          twitter_id:     theme.miscellaneous.open_graph.twitter_id,
          google_plus:    theme.miscellaneous.open_graph.google_plus,
      }) %>
<% } %>

/images/keyboard.JPG 라고 표시된 경로에 본인이 원하는 URL을 입력하시면 되겠습니다.

그럼 다시 배포를 하고 확인해봅시다.

1
2
$ hexo g
$ hexo d

이제 홈페이지도 이미지가 제대로 나옵니다.

https://developers.facebook.com/tools/debug/sharing

오픈 그래프 태그와 Hexo 에 적용하는 법을 알아봤습니다. 다음 포스팅에서는 Hexo 의 고급 설정과 플러그인, 커스터마이징 등을 살펴보겠습니다.

Share