Contents
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://deku.posstree.com/">
<link rel="alternate" hreflang="ko" href="https://deku.posstree.com/ko/">
<link rel="alternate" hreflang="en" href="https://deku.posstree.com/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="[email protected]">
<meta property="og:locale" content="ja">
<meta name="description" content="『プログラミングアーチスト、ヤクザ』">
<meta property="og:description" content="『プログラミングアーチスト、ヤクザ』">
<link rel="canonical" href="https://deku.posstree.com/">
<meta property="og:url" content="https://deku.posstree.com/">
<meta property="og:site_name" content="프로그래밍으로 예술을 꿈꾼다">
<meta property="og:image" content="https://deku.posstree.com/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://deku.posstree.com/","author":{"@type":"Person","name":"[email protected]"},"description":"『プログラミングアーチスト、ヤクザ』","name":"프로그래밍으로 예술을 꿈꾼다","headline":"プログラミングでアートを夢見る.","@type":"WebSite","image":"https://deku.posstree.com/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.
Although it may not related SEO, add the below tag for sharing contents more attractive.
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
- jekyll SEO plugin: jekyll-seo-tag
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
You can use the applications that are created by this blog writer
If you have interested, please try to download them for free.
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
