Posted at

Jekyll での SEO関連タグ

More than 1 year has passed since last update.


やりたいこと


  • 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.ymlgoogle_analytics が設定されてたときだけソースが書き出される

{% if jekyll.environment == 'production' %}

{% if site.google_analytics %}{% include google-analytics.html %}{% endif %}
{% endif %}
</head>


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

Jekyll SEO Tag を使う。

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


Googleサーチコンソール

_config.ymlgoogle_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でなくてもここまでできますよーということで、現場からは以上です。