HugoでSEOスコアを改善するためにやったこと

2022-12-04

イントロダクション

WordpressからHugoに移行してからというものブログの更新頻度も落ちたこともあってかブログのSEOスコアが落ちていて検索順位も順当に落ちていました。

要因としては、更新頻度が落ちたことや、TwitterなどのSNSなどの外部リンクが少なくなっていたことも考えられます。余計なコメントを残していたWordpressサイトを巡回しているスパムBotが皮肉にもアクセス数を稼ぎ収益になっていたんじゃないかとすら思えます。

Hugoに移行してやれることをやろうと思い、まずはSEOスコアの改善が良さそうなので取り組んできました。

Google Speed insightのスコア結果

Google Speed Insight

Google Adsenceを意図的に除いてのスコアです。追加すると少しスコアが落ちます。

デスクトップスコア

モバイルスコア

HugoのTheme選定

デザインの好みがありますのでまずはそれ基準に選びます。 SEOに強いThemeがいいなと思いながら、シンプルそうなものを選んでいます。

個人的には、右側にメニューがあるのが好きなのでこちらにしました。標準のフォーマットから更に手を加えたところこの記事では紹介します。

Mainroad

デモサイトのリンクも合わせておいておきます。 DEMOサイト

Demo

このThemeを適応します。公式の手順に沿って行えば問題ありません。

次世代フォーマットでの画像の配信

Pngやjpgを使って画像を貼り付けるのも良いのですが、次世代画像フォーマットというのが出てきています。過去に記事にもしてますが、今回はwebpを使用しています。

ブログでの使用画像をWebpフォーマットに変換してサイト軽量化する

このブログを書いていたときから、記事のフォルダ構成を変えているためツールも合わせて書き換えています。

記事毎にフォルダを作っておりこのような構成です。

post1
 |----index.html
 |____image.png
post2
 |-----index.html
 |_____image.png

画像を一括でWebpフォーマットに変換するためのコードを書いておきましたので参考になれば幸いです。

post1
 |----index.html
 |____image.webp
post2
 |-----index.html
 |_____image.webp

こんな感じでwebpにします。

とりあえず動かすことを目的にしていますのでこのような感じです。

# -*- coding: utf-8 -*-
import shutil
from PIL import Image
import glob, os
import sys

def getfileList(IMGDIR):
    files = []
    filesjpg = glob.glob(IMGDIR + '*.jpg')
    filespng = glob.glob(IMGDIR + '*.png')
    filesjpeg = glob.glob(IMGDIR + '*.jpeg')
    filesgif = glob.glob(IMGDIR + '*.gif')
    files.extend(filesjpg)
    files.extend(filespng)
    files.extend(filesjpeg)
    files.extend(filesgif)
    return files

def main():
    # 変換したい画像フォーマット
    IMG_FORMAT = 'webp'
    COMPRESS_QUALITY = 100
    IMGDIR = './content/post/**/'
    IMGDIRBACK = './static/img/back/'
    CONV_DIR = './static/images/'

    os.makedirs(CONV_DIR, exist_ok=True)
    files = getfileList(IMGDIR)
    print(IMGDIR)
    for file in files:
        print(file)
        folda = os.path.dirname(file)
        file_name = os.path.splitext(os.path.basename(file))[0]
        print(folda)
        img = Image.open(file).convert('RGB')
        resized_img = img.resize((img.width, img.height))
        resized_img.save(folda+"/" + file_name + '.' + IMG_FORMAT, quality=COMPRESS_QUALITY)
    print("変換完了")

if __name__ == "__main__":
    main()

実行すると、webp画像が得られるので、記事内に貼り付けるだけです。 VSCodeでMarkdownファイルを編集しているため、スクショを貼り付けると同一フォルダ内に画像として保存されます。ついでにリンクも張ってくれます。この貼ってもらったリンクの画像をpngからwebpに書き換えているような形です。

これで対応完了です。

適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください

スクショで張った画像だとモバイル向けには大きすぎるため画像を小さくします。一々小さな画像を作るのは手間なので、Hugoの機能でサポートされているImage Processingを使います。

一応この記事でも少し触れてますが、改めて記載します。

HugoでMobile端末向けのSEO対策を実践していく【画像の適正サイズ】

Themes/mainroad/post_thumbnail.html をまるごと書き換えます。

{{- if $thumbnail := .page.Params.coverImage }}
	{{- $class := .class }}
	{{ $thumbnail = .page.Params.coverImage }}
		<figure class="{{ with $class }}{{ . }}__thumbnail {{ end }}thumbnail">
			{{ with .page.Resources.GetMatch .page.Params.coverImage }}
			{{ with .Fill "480x280"}}
				<img layout="responsive" class="thumbnail__image" src="{{ .RelPermalink }}" alt="{{ .Title }}" width="{{ .Width }}" height="{{ .Height }}" >
			{{ end }}
		  	{{ end }}
		</figure>
{{- end }}

各記事のMarkdownファイルの中にcoverImageとして画像のリンクを貼っておいたのでその画像を480×280のサイズに切り抜き画像を作っています。やっていることはImage Processingの説明にあることを実施しているのみです。

Image Processing

これで

Webフォントの読み込み中のテキストの表示

_default/baseof.html　を編集していきます。

Google Fontを読み出している箇所を少し書き換えるだけです。

	{{- $googleFontsLink := .Site.Params.googleFontsLink | default "https://fonts.googleapis.com/css?family=Open+Sans&display=swap:400,400i,700" }}
	{{- if hasPrefix $googleFontsLink "https://fonts.googleapis.com/" }}
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link rel="dns-prefetch" href="//fonts.googleapis.com">
	<link rel="dns-prefetch" href="//fonts.gstatic.com">
-	<link rel="stylesheet" {{ printf `href="%s"` $googleFontsLink | safeHTMLAttr }} >
+ <link rel="stylesheet" {{ printf `href="%s"` $googleFontsLink | safeHTMLAttr }} media="print" onload="this.media='all'" >
	{{- end }}