SEO support

2019-05-23

try to make jekyll project supports SEO

outline

this blog introduces SEO support with the project which we made until now. we will use jekyll blog project include Multi-languages plugin for introducing.

basic support

write <title> and <description> for supporting basic SEO.

<head>
    ...
    <title>{{page.title}} - {{page.description}}</title>
    <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
    ...
</head>

support SEO by Multi-languages plugin

write below code into _includes/head.html. if you can’t find _includes/head.html file because of the theme, just copy-paste below code into <head></head> tag.

<head>
    ...
    {% I18n_Headers %}
    ...
</head>
  • I18n_Headers: jekyll-polyglot which we use for supporting multi-language provides the feature.
  • this will be changed to below code.
<head>
    ...
    <meta http-equiv="Content-Language" content="ja">
    <link rel="alternate" hreflang="ja" href=" https://dev-yakuza.github.io/">
    <link rel="alternate" hreflang="ko" href="https://dev-yakuza.github.io/ko/">
    <link rel="alternate" hreflang="en" href="https://dev-yakuza.github.io/en/">
    ...
</head>

SEO support using plugin

install required plugin for supporting SEO.

SEO plugin installation

install the plugin using below code.

gem install jekyll-seo-tag

set a configuration for using library.

plugins:
  - jekyll-seo-tag

how to use

write below code intto <head> tag.

<head>
    ...
    {% seo title=false %}
    ...
</head>
  • {% seo %}: the plugin will change this code to below code.
<head>
    ...
    <meta name="generator" content="Jekyll v3.7.3">
    <meta property="og:title" content="プログラミングでアートを夢見る.">
    <meta name="author" content="dev.yakuza@gmail.com">
    <meta property="og:locale" content="ja">
    <meta name="description" content="『プログラミングアーチスト、ヤクザ』">
    <meta property="og:description" content="『プログラミングアーチスト、ヤクザ』">
    <link rel="canonical" href="https://dev-yakuza.github.io/">
    <meta property="og:url" content="https://dev-yakuza.github.io/">
    <meta property="og:site_name" content="프로그래밍으로 예술을 꿈꾼다">
    <meta property="og:image" content="https://dev-yakuza.github.io/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://dev-yakuza.github.io/","author":{"@type":"Person","name":"dev.yakuza@gmail.com"},"description":"『プログラミングアーチスト、ヤクザ』","name":"프로그래밍으로 예술을 꿈꾼다","headline":"プログラミングでアートを夢見る.","@type":"WebSite","image":"https://dev-yakuza.github.io/assets/images/main.jpg","@context":"http://schema.org"}
    </script>
    ...
</head>
  • title=false: we use basic title tag, so write this option to disable to generate title tag.

twitter

Although it may not related SEO, add the below tag for sharing contents more attractive.

twitter card type

edit the below tag if you need to change.

<meta name="twitter:title" content="SEO support" />
<meta name="twitter:description" content="try to make jekyll project supports SEO" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@DevYakuza" />
<meta name="twitter:creator" content="@DevYakuza" />
  • twitter:title: this is card title.
  • twitter:description: this is card description.
  • twitter:card: this is card type. you can choose one of summary_large_image, summary, photo.
  • twitter:site: this is the user name of the website.
  • twitter:creator: this is the user name who created the card.

reference

Buy me a coffeeBuy me a coffee
Posts