- Published on
Jekyll liquidでSEO対策(noindex・canonical・keywords)
- Authors
- Name
- Shou Arisaka nyapp.buzz/shou
- short bio
- Z世代の情報技術者。Next.jsで自作SNSを個人開発中。
Rubyプログラミング言語のブログフレームワークJekyllにおいて、Jekyll liquidで検索エンジン対策・SEO対策として、noindex、canonical、keywordsなどを実装したのでそれについて方法を紹介します。
最初は、jekyll-seo-tagっていうプラグインで実装しようと思ってたんですが、自分で書いたほうが拡張性というか自由度があるので自分で書いてみました。 jekyll-seo-tagはWordPressでいうhookみたいなのがないようなので、例えばタイトルこそtitle=falseを指定することもできますが、調べるとcanonicalとかはそういうのがないみたいです。 つまり、canonicalが指定されていればそれを優先し、指定されていなければデフォルトを使用、というようなことが出来ないんですね。
HTMLのSEOメタタグってのは基本最初に定義したものが優先されるので、複数定義されているってのは良くないんですね。 ということで実装しました。
こんな感じでできるようにしました。
---
layout: post
title: "test"
date: 2018-01-01 11:00:09 +0900
categories: blog
index: false
follow: true
keywords: hoge,fuga
canonical_url: 'https://example.com/'
---
index: falseを指定するとnoindexにできるfollow: falseを指定するとnofollowにできるkeywordsを指定するとメタキーワードをデフォルトより優先して設定できるcanonical_urlを指定するとデフォルトより優先して設定できる
ソースコード
<title>{% if page.title %}{% capture new_title %}{{ page.title }} << YAYB {% endcapture %}{{ new_title }}{% else %}{{ site.title }}{% endif %}</title>
<meta name="description" content="{% if page.excerpt %}{{ page.title }} - {{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
{% if page.keywords %} <meta name="keywords" content="{{ page.keywords }}"> {% else %} <meta name="keywords" content="yuis,blog"> {% endif %}
<meta name="robots" content="{% if page.index == false %}noindex{% else %}index{% endif %}, {% if page.follow == false%}nofollow{% else %}follow{% endif %}">
{% if page.canonical_url %} <link rel="canonical" href="{{ page.canonical_url }}">{% else %} <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">{% endif %}
ちなみにdescriptionも少し弄っています。タイトルを先頭にくっつけるようにしています。
15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。
