JekyllでのSEO
Wordpressを使っていたユーザーからの、よくある質問が、JekyllではどのようにSEOをするかということです。 Jekyllでは、Wordpressのプラグインでできていた以上に、もっとSEOをコントロールすることができます。
このチュートリアルの基礎として、GoogleがまとめたSearch Engine Optimization Starter Guideを参考にしようと思います。(日本語版はこちら)
<title>
と<meta>
descriptionタグを設定し、URL構造を改善し、サイトマップとカスタム404ページの追加を行っていきましょう。
タイトルとサイトの説明
Front Matterを使うことで、簡単に編集できる<title>
と<meta>
descriptionタグを作ることができます。
<title>
には、Front Matterに変数があればタイトルとして出力し、なければデフォルトのものを使います:
...
<title>
{% if page.title %}
{{ page.title }}
{% else %}
Default Page Title
{% endif %}
</title>
...
<meta>
descriptionには、Front Matterに変数があったときだけ出力しましょう:
...
{% if page.description %}
<meta name="description" content="{{ page.description}}" />
{% endif %}
...
このように各HTMLページのFront Matterにこれらの変数を設定しましょう:
---
title: Creative Hub - Blog
description: A blog with the latest trends and news in Web Design
---
...
もしあなたがCloudCannonをお使いなら、技術に詳しくないユーザーでもFront Matterを簡単に変更できます:
URL構造を改善する
Permalinks(パーマリンク)を使えば、JekyllでどのようにURLを構築するかコントロールできます。 SEOのために、Googleは説明的な単語をURLに使うことを推奨しています。
/red.html
というHTMLページがあることを宣言しましょう。ですが、/cups/red/
というURLにしたいとき、Front Matterに書かれたpermalinkはこのようになります:
---
permalink: /cups/red/
---
...
ファイル名を/red.html
から/cups/red/index.html
に変更することでも可能ですが、Jekyllはお好きな方法でサイトを構成する力を与えてくれます。
さらに便利な例は、ブログ記事のpermalinkを変更するものです。_config.yml
に以下の行を追加するだけです:
...
permalink: /blog/:year/:month/:day/:title/
...
コレクション全体のpermalinkも変更することができます:
...
collections:
products:
output: true
permalink: "/:collection/:title/"
...
サイトマップ
David Ensingerのスクリプトを使って、 サイトマップを生成することができます。
以下の内容で/sitemap.xml
を作ります:
---
layout: null
sitemap:
exclude: 'yes'
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for post in site.posts %}
{% unless post.published == false %}
<url>
<loc>{{ site.url }}{{ post.url }}</loc>
{% if post.sitemap.lastmod %}
<lastmod>{{ post.sitemap.lastmod | date: "%Y-%m-%d" }}</lastmod>
{% elsif post.date %}
<lastmod>{{ post.date | date_to_xmlschema }}</lastmod>
{% else %}
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
{% endif %}
{% if post.sitemap.changefreq %}
<changefreq>{{ post.sitemap.changefreq }}</changefreq>
{% else %}
<changefreq>monthly</changefreq>
{% endif %}
{% if post.sitemap.priority %}
<priority>{{ post.sitemap.priority }}</priority>
{% else %}
<priority>0.5</priority>
{% endif %}
</url>
{% endunless %}
{% endfor %}
{% for page in site.pages %}
{% assign split_path = page.path | split: "." %}
{% assign extension = split_path | last %}
{% if page.sitemap.exclude != "yes" and extension == "html" and page.path != "/404.html" %}
<url>
<loc>{{ site.url }}{{ page.permalink | remove: "index.html" }}</loc>
{% if page.sitemap.lastmod %}
<lastmod>{{ page.sitemap.lastmod | date: "%Y-%m-%d" }}</lastmod>
{% elsif page.date %}
<lastmod>{{ page.date | date_to_xmlschema }}</lastmod>
{% else %}
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
{% endif %}
{% if page.sitemap.changefreq %}
<changefreq>{{ page.sitemap.changefreq }}</changefreq>
{% else %}
<changefreq>monthly</changefreq>
{% endif %}
{% if page.sitemap.priority %}
<priority>{{ page.sitemap.priority }}</priority>
{% else %}
<priority>0.3</priority>
{% endif %}
</url>
{% endif %}
{% endfor %}
{% for collection in site.collections %}
{% if collection[1].output %}
{% for doc in collection[1].docs %}
<url>
<loc>{{ site.url }}{{ doc.url | remove: "index.html" }}</loc>
{% if doc.sitemap.lastmod %}
<lastmod>{{ doc.sitemap.lastmod | date: "%Y-%m-%d" }}</lastmod>
{% elsif doc.date %}
<lastmod>{{ doc.date | date_to_xmlschema }}</lastmod>
{% else %}
<lastmod>{{ site.time | date_to_xmlschema }}</lastmod>
{% endif %}
{% if doc.sitemap.changefreq %}
<changefreq>{{ doc.sitemap.changefreq }}</changefreq>
{% else %}
<changefreq>monthly</changefreq>
{% endif %}
{% if doc.sitemap.priority %}
<priority>{{ doc.sitemap.priority }}</priority>
{% else %}
<priority>0.3</priority>
{% endif %}
</url>
{% endfor %}
{% endif %}
{% endfor %}
</urlset>
これはデフォルトでウェブサイトのすべての記事、ページを含んでいます。ページの除外や、優先度(priority)の設定がFront Matterを使うことでできます:
sitemap:
lastmod: 2015-01-23
priority: 0.7
changefreq: monthly
exclude: yes
_config.yml
にウェブサイトのドメインを追加する必要もあります:
...
url: http://mysite.com
...
カスタム404ページ
これはさらに詳細なベストプラクティスです。Jekyllでのカスタム404ページは、ユーザーが存在しないページにアクセスしてしまったとき、案内をして助けることができます。
404ページの内容とともに404.html
を作ります。Front Matter、liquidとレイアウトが使えます。
GitHub Pages, CloudCannonやJekyll Serverは、ページが見つからない時に404.htmlを表示します。 その他のサービスの場合はカスタム404ページを機能させるために設定が必要でしょう。
コンテンツでのTips
良いコンテンツはSEOの鍵です。少しのシンプルなルールによって、サイトのコンテンツが高い検索エンジンの順位を実現することを確実にできます。
- 検索エンジンは新しいコンテンツを大変好む
- 検索エンジンは重複したコンテンツを好まない
- 画像には常にalt属性をつける
- リンクには説明的なテキストを使う: 悪い例:Google SEOスターターガイドはこちらをクリック 。 良い例:Google SEOスターターガイドをダウンロード。
- もしページを削除した場合は、適切で関連のある場所へリダイレクトを作成する。CloudCannonで301 redirectsを使うことで可能です。