【HABONE】テーマ サイトの最適化と高速化に関する設定項目

【HABONE】テーマ サイトの最適化と高速化に関する設定項目
サブメニュー設定名簡易説明
SEO独自SEO設定を使う投稿・固定ページごとに「タイトル」「ディスクリプション」「キーワード」「Noindex」「Nofollow」の設定ができます
独自メタ情報の出力独自SEO設定の内容をHTMLへ出力します
Canonicalタグの出力検索エンジンへ正確なURLを知らせます
「alt」属性の自動設定本文内へ挿入した画像にalt属性がない場合、自動でページタイトルを付与します
最適化絵文字を無効
HTMLの圧縮HTMLソースを改行やコメントのない形へ整形します
フロントエンドで使用しないCSSを出力しない
画像ファイルURLをNoindexにする
高速化スクリプトの遅延読み込み
アドセンス広告の遅延表示
ブログ村の遅延読み込み
Twitterの遅延読み込み
Instagramの遅延読み込み

SEO

独自SEO設定を使う

有効にすると、投稿及び固定ページ編集画面下へ以下のような項目が表示されます

【HABONE】テーマ サイトの最適化と高速化に関する設定項目|HABONE

各項目へ入力・設定したものはサイトのいろいろな場所への表示に利用したり、検索エンジンへページの情報を伝える内容として出力したりします。

入力した場合、どこに影響するのか?どのようになるのか?等については、各項目下にある「この項目について」(画像赤枠部分)をクリックすると詳細な内容をいつでもご覧いただけますので、設定に困ることもありません。

独自メタ情報の出力

前項の「独自SEO設定を使う」を有効にした場合、検索エンジンへページの内容を知らせる際に必要なタグ(HTMLソース上の情報)を出力するかどうかの設定です。

本テーマの機能を使ってSEO関連の情報を出力する場合は有効にし、他の方が提供されているプラグイン等を使用してこれらの出力や設定を行う場合には無効のままにしておきます。

本テーマの機能とプラグインとの両方を有効にすると、入力した内容が異なる場合には、検索エンジンに伝わる内容が煩雑になり、誤認識されることがありますので、初期段階で、どちらを使うかを決めてください。

Canonicalタグの出力

各ページのURLを正確に検索エンジンへ伝えるための機能です。例えばSSL接続と非SSL接続の両方でアクセスできるサイトで、同一コンテンツが存在するサイトであると誤認識されないようにするといった効果があります。

「alt」属性の自動設定

投稿や固定ページの本文内へ挿入した画像は、検索エンジンにとっては単なるオブジェクト(部品)であり、何を示すものかの判断ができません。alt属性は本来、画像が表示できないブラウザでページの閲覧を行った際に「画像の代替文字」として使用されるものですが、同時に検索エンジンに対してもその部分の意味を伝えることができます。

とはいえ、挿入した画像すべてにalt属性を付加することはとても骨の折れる作業であり、忘れてしまうこともあります。

本機能はそうした状況でも「投稿や固定ページのタイトルとサイトタイトル」を自動的にalt属性を付加してHTMLソースへ出力するお助け機能です。

alt属性が設定されている画像については、設定されているものがそのまま使われます

最適化

絵文字を無効

投稿や固定ページの本文内で絵文字を使用しない場合、有効にします。これにより、余分なCSS(デザインコード)を読み込まなくなり、転送量の低減と表示高速化の手助けができます。

HTMLの圧縮

WordPressは最終的にデータベースから集めてきた情報を、ウェブブラウザでページとして表示できるようHTML形式のソースとして出力します。

本機能を有効にすることで、出力されるソース内で表示に必要のない「プログラム上コメント」「余分な改行」を排除することで、転送量の低減を図ることができます。

フロントエンドで使用しないCSSを出力しない

WordPressでは、本来管理画面上でしか利用しない以下のCSSを、閲覧画面でも読み込むようになっています。

  • wp-editor-font
  • dashicons
  • wp-components
  • wp-block-editor

本機能を有効にすると、これらを閲覧画面側で出力しないようになり、転送量の低減を図ることができます。

これにより表示に異常がみられる場合には、機能を無効にしてください

画像ファイルURLをNoindexにする

WordPressでは、画像やファイルをアップロードした際、それらをIDで管理するために通常の投稿のようなページを自動生成します(これを添付ファイルページといいます)。

このページには、画像であれば画像そのものと画像へのリンク、ファイルであればファイル名とファイルへのリンクのみ表示されるようになっており、内容のほとんどないページが量産されることになります。

本機能を有効にすることで、添付ファイルページに対して検索エンジン側で検索対象にしないように依頼する情報(Noindexメタタグ)を出力し、検索対象として扱われないようにすることができます。

Noindexメタタグは原則的に、検索エンジン側へ検索対象として登録しないように依頼するためのタグですので、この措置で絶対に登録されないようになるわけではありませんのでご注意ください

高速化

スクリプトの遅延読み込み

ページ表示時に出力される、テーマやプラグインが利用するJavaScriptファイルへのリンクに対して「defer」属性を付加し、スクリプトの読み込みがページ描画を遅くさせないようにします。

これにより、ページの表示速度が向上するだけでなく、Google PageSpeed Insightsなどで「レンダリングを妨げるスクリプトの遅延」が提案されることが少なくなり、スコアの向上を図ることができます。

WordPressのenqueue_scriptを使ってリンク経由で読み込まれるもののみに対して動作しますので、すべてのスクリプトが遅延(defer)読み込みになるわけではありません

本機能を有効にすることでサイトの表示や動作に不具合が発生する場合は、使用しないでください

アドセンス広告の遅延表示

Google Adsenseの広告は、ページ表示時に外部スクリプトを読み込みにいくようになっており、場合によっては外部スクリプトの読み込みに時間がかかることが原因でページの表示が遅くなってしまうことがあります。

本機能を有効にすると以下の条件に従って外部スクリプトを読み込みにいくようになり、安定的なページ表示ができます。

  • ページ表示後に訪問者が何等かのマウス操作を行ったとき
  • ページ表示してから何もしないで2秒以上経過したとき

本機能を有効にする場合には、テーマカスタマイザーの「広告と追加コード」→「Googleアドセンス」メニューでクライアントIDを設定し、すべての広告から以下のような1行目のコード(例)を削除してください。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

ブログ村の遅延読み込み

ブログランキングとして有名な「日本ブログ村」のウィジェットなどを表示させる際に読み込む外部スクリプトを、前項のアドセンスと同じ仕組みで処理することにより、安定的なページの表示を実現します。

本機能を有効にした際には、挿入するすべての日本ブログ村のスクリプトから、以下のコードを削除してください

<script src="https://blogparts.blogmura.com/js/parts_view.js" async></script>

Twitterの遅延読み込み

Twitterのツイートを本文内へ埋め込む場合に、前項と同じ仕組みで処理させ、安定的なページの表示を行います。

本機能を有効にして適用させるには、以下の手順でツイートの埋め込みを行ってください

  1. Twitterの埋め込みコードをコピーします
  2. 投稿や固定ページの編集画面で、カスタムhtmlブロックを挿入し、1を貼り付けます
  3. 貼り付けたコードから以下のコード部分を削除します
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Instagramの遅延読み込み

機能と使い方はTwitterの場合と同じです。

コード挿入後、以下のコード部分を削除してください

<script async src="//www.instagram.com/embed.js"></script>