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中で1つを選べます。
twitter:site: ウェブサイトのユーザー名です。
twitter:creator: カードを作った人の名です。