SEO 지원

개요

지금까지 만든 프로젝트에 SEO를 지원하기 위한 작업을 설명하겠습니다. 이 블로그에서 소개하는 jekyll 블로그 프로젝트는 다국어 플러그인이 설치된 프로젝트로 진행합니다.

기본적인 설정

기본적으로 <title>과 <description>을 설정해 줍니다.

<head>
    ...
    <title>{{page.title}} - {{page.description}}</title>
    <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
    ...
</head>

다국어 플러그인을 이용한 SEO 지원

_includes/head.html에 아래에 코드를 넣어줍니다. 테마에 따라 head.html 파일이 존재하지 않는 경우 <head></head>태그 안에 아래에 코드를 복사 붙여넣기 합니다.

<head>
    ...
    {% I18n_Headers %}
    ...
</head>

I18n_Headers: 다국어 플러그인으로 사용중인 jekyll-polyglot에서 지원하는 기능입니다.
아래와 같은 코드를 생성해 줍니다.

<head>
    ...
    <meta http-equiv="Content-Language" content="ja">
    <link rel="alternate" hreflang="ja" href=" https://deku.posstree.com/">
    <link rel="alternate" hreflang="ko" href="https://deku.posstree.com/ko/">
    <link rel="alternate" hreflang="en" href="https://deku.posstree.com/en/">
    ...
</head>

SEO 라이브러리를 이용한 지원

SEO를 지원하는 라이브러리를 설치합니다.

SEO 플러그인 설치

아래에 명령어를 이용하여 플러그인를 설치합니다.

gem install jekyll-seo-tag

플러그인를 사용하기 위해 설정합니다.

plugins:
  - jekyll-seo-tag

사용법

아래에 코드를 <head> 태그에 작성해 줍니다.

<head>
    ...
    {% seo title=false %}
    ...
</head>

{% seo %}: 플러그인가 아래와 같이 변경해줍니다.

<head>
    ...
    <meta name="generator" content="Jekyll v3.7.3">
    <meta property="og:title" content="プログラミングでアートを夢見る.">
    <meta name="author" content="[email protected]">
    <meta property="og:locale" content="ja">
    <meta name="description" content="『プログラミングアーチスト、ヤクザ』">
    <meta property="og:description" content="『プログラミングアーチスト、ヤクザ』">
    <link rel="canonical" href="https://deku.posstree.com/">
    <meta property="og:url" content="https://deku.posstree.com/">
    <meta property="og:site_name" content="프로그래밍으로 예술을 꿈꾼다">
    <meta property="og:image" content="https://deku.posstree.com/assets/images/main.jpg">
    <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
    <script src="https://pagead2.googlesyndication.com/pagead/js/r20181008/r20180604/osd.js"></script>
    <script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-7987914246691031.js"></script>
    <script type="application/ld+json">
    {"url":"https://deku.posstree.com/","author":{"@type":"Person","name":"[email protected]"},"description":"『プログラミングアーチスト、ヤクザ』","name":"프로그래밍으로 예술을 꿈꾼다","headline":"プログラミングでアートを夢見る.","@type":"WebSite","image":"https://deku.posstree.com/assets/images/main.jpg","@context":"http://schema.org"}
    </script>
    ...
</head>

title=false: 우리는 타이틀을 별도로 사용하기 때문에 타이틀을 생성하지 않게 하기 위한 옵션을 적용했습니다.

twitter

SEO와는 관계없을 수 있지만 twitter에 블로그를 공유할때 카드 타입으로 표시하여 좀 더 매력적인 콘텐츠 공유를 합니다.

아래에 태그에 필요한 값을 채워주세요.

<meta name="twitter:title" content="SEO 지원" />
<meta name="twitter:description" content="jekyll 프로젝트에 SEO를 지원하도록 만들어 보자." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@DevYakuza" />
<meta name="twitter:creator" content="@DevYakuza" />

twitter:title: 카드에 표시될 제목입니다.
twitter:description: 카드에 표시될 설명글입니다.
twitter:card: 카드에 타입을 지정합니다. summary_large_image, summary, photo 중 하나를 선택할 수 있습니다.
twitter:site: 웹사이트의 사용자 이름입니다.
twitter:creator: 카드를 만든 사람의 이름입니다.