THETHORでSEO設定をする方法を解説!!

 
マーシー
この記事ではTHETHORで【SEO設定】をする方法と設定内容について紹介しているよ!!

SEOの設定

THE THORはSEOの面でも強いテーマになっています。スマホをメイン媒体と考えると表示速度の向上は必須項目なのですが、表示速度の向上に不可欠な非同期化やコード圧縮などのSEO対策になる設定がいとも簡単にできます。

表示速度の向上になるSEO対策項目が「チェックを入れるだけ」で簡単に実装できるので、デザインに合わせて必要な項目にチェックを入れて上手く活用しましょう。

「SEO設定」までの流れ

【ダッシュボード】

【外観】

【カスタマイズ】

【SEO設定】

TOPページSEO設定

トップページのタイトル

ホームページのタイトルを記入します。下部のチェック項目は「|サイトのタイトル」を表示するかどうかの選択ができます。必要に応じてチェックを入れましょう。

トップページのメタタグ

メタディレクションでは、TOPページについての概要説明文を記入していきます。

CSS非同期読み込み設定

表示速度を向上させるためにCSS非同期設定はとても重要な項目になります。ページが表示された場合、画面をスクロールするまで見えない部分の読み込みを後回しにすることで表示速度が向上します。

注意点
非同期読み込み設定をすると「0.1秒ほど」ですが、ページが表示される最初の一瞬に画面が崩れることがあります。

非同期読み込み設定①

メインCSS、子テーマCSS、アイコンなどのCSSを非同期設定にする場合は「チェック」を入れましょう。頻繁に使っているCSSコードは子テーマCSSに移すことで非同期することが可能です。

注意点
「追加CSS」に記載しているCSSは非同期されませんので注意して下さい!!

非同期読み込み設定②

「Lato」「Fjalla」「Noto Sans JP」のGoogleフォントを非同期する場合は「チェック」を入れましょう。WEBフォントを使用していない場合は「チェック」を入れる必要はありません。

非同期読み込み設定③

メインビジュアルスライダー機能、記事カルーセル機能、メインビジュアル背景動画機能を使用している場合は「チェック」を入れましょう。

img非同期読み込み設定

画像の非同期設定

ブログを書く上で、ページが重くなる原因の1つとして画像の読み込みがあります。使用する画像の枚数が多くなれば、その分読み込みまでに時間がかかりユーザーの離脱率に直結してきます。

もちろん画像一枚一枚のサイズをなるべく小さくすることや、WebPを使用するなどの工夫も必要ですが、非同期設定も画像を使う以上は重要な項目になります。

画像を使用している場合は「チェック」を入れましょう。

「WebP」の設定

 
マーシー
画像に関するSEO対策は非同期以外にも次世代フォーマットを使う方法もあるよ!!

画像に関しては非同期する以外にもSEO対策として「次世代フォーマット」を使用する方法もあります。次世代フォーマットにもいくつか種類はありますが、ブラウザによって対応の幅がバラバラです。

その中でもブラウザに幅広く対応している「WebP(ウェッピー)」がオススメです。使用方法については、別記事にまとめていますので気になる方は是非!!

次世代フォーマット「WebP」をプラグインで簡単に実装する方法!!

htaccess設定

ブラウザキャッシュとGzip圧縮の設定

また、Gzip圧縮にチェックを入れることで、CSSやJavascriptなどのファイルを圧縮して、サーバーとユーザー間での転送量を小さくすることができます。

注意点
記事の更新をした際などに、キャッシュの削除が必要な場合があります。ブラウザキャッシュを有効にしていると古いキャッシュが残っていて、最新の内容が表示されない場合があるためです。

ブラウザキャッシュ、Gzip圧縮は必要に応じて「チェック」を入れましょう。

HTML圧縮設定

「HTML」圧縮の設定

HTMLの圧縮をすることで、表示速度が向上します。画像の非同期などに比べると速度向上は微々たるものではありますが、少しでも表示速度を向上させたい場合は試してみる価値はあると思います。

HTMLを圧縮したい場合は「チェック」入れましょう。

 
マーシー
コードを表示する場合は改行が圧縮されて一行にまとめられてしまうので注意してね!!

表示速度の確認方法

THE THORに標準装備されている「SEO設定」について紹介しました。通常はプラグインなどでする対策をプラグイン不要で簡単に実装できる点ではとても優秀なテーマだと言えます。

CSSの非同期や画像の圧縮によって速度向上をはかることは、SEO対策としてとても重要なことです。上位表示されているサイトや有名なブロガーの方々のサイトなどの表示速度は、やはり一級品です。自分のサイトのスマホでの表示速度を測る方法を紹介しますので、試してみてください。

スマホサイトの表示速度は何秒!? Test My Siteを使ってページの表示速度を測る!!