Jekyll での SEO関連タグ

#やりたいこと

• Google サーチコンソールのタグ埋めたい
• Google アナリティクスのコード入れたい
• OGタグをいい感じに出したい
• xmlサイトマップは自動生成したい
• Feed もあるといいよね

Feed

Jekyll Feed plugin を使う。
入れておけば自動でフィードを生成してくれる。

xmlサイトマップ

Jekyll Sitemap Generator Plugin を使う。
入れておけば自動でxmlサイトマップを生成してくれる。

Googleアナリティクス

いい感じのプラグインがないので、自作。

参照：https://michaelsoolee.com/google-analytics-jekyll/

1 _config.yml に変数書いておく（なくも2のテンプレートに直接書いてもよい）

google_analytics: UA-XXXXXXXX-X

2 _includes/analytics.html を作る

<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	ga('create', '{{ site.google_analytics }}', 'auto');
	ga('send', 'pageview');

</script>

3 </head> の前辺りに include する
例は JEKYLL_ENV=production でビルド実行時に _config.yml に google_analytics が設定されてたときだけソースが書き出される

{% if jekyll.environment == 'production' %}
{% if site.google_analytics %}{% include google-analytics.html %}{% endif %}
{% endif %}
</head>

OG タグとか Google サーチコンソール

Jekyll SEO Tag を使う。
いわゆるSEOに必要そうなタグはこれで。

Googleサーチコンソール

_config.yml で google_site_verification にサーチコンソールの確認方法の「HTML タグ」に出てくる content の値を設定しておく。

<meta name="google-site-verification" content="xxx" />

<title>

テンプレートに <title> がすでにあるとプラグインの出すタグと重複してしまう。
テンプレート側を活かす場合は {% seo title=false %} を書いておく

Description

_config.yml の他、各ドキュメントの Front Matter でも設定できる。

OGタグ、Twittercard

og:image含め一通り対応してる。
Descriptionと同じく _config.yml の他、各ドキュメントのFront Matterでも設定できる。

Canonical URL

Front Matter で canonical_urlを設定する。

CMSでなくてもここまでできますよーということで、現場からは以上です。