ブログのアイキャッチ画像を非表示にする方法

はじめに

Bloggerでは記事1番目の画像（imgタグ）をアイキャッチ画像（og:imege）として取得し、サムネイル画像で利用されてます。

記事にアイキャッチ画像を表示したくない場合は、display: noneの属性を入れると非表示になります。

但し、この方法はデメリットがあるので、ひと工夫する必要があります。

display: noneのデメリット

1つ目のデメリットはページスピードのパフォーマンス悪化です。

display: noneだけでは要素を非表示にしているだけで、画像の読み込みを止めることは出来ません。

2つ目のデメリットはSEOの観点です。

display: noneだけを使うと評価が下がり検索順位に悪影響が出る恐れがあると言われてます。

では、上記デメリットが発生しない方法を紹介します。

記事内のアイキャッチ画像を非表示にする方法

管理人が提案する方法はnoscriptタグの活用です。

noscriptタグを使えば、画像の読み込みはスルーされるため、ページスピードの低下を避けることができます。

また、noscriptタグ内の画像のみはインデックスの対象になっており、Googleはnoscriptタグを使った遅延読み込みも推奨しています。

ファーストビューのビューポート外から遠くない画像はloading="lazy"が効かないため画像を読み込んでしまいます。

このような場合、管理人はnoscriptタグで遅延読み込み表示させてます。（注）

注：JetThemaはnoscriptタグ内に画像があると、feature-imageというクラスが自動で追加され、遅延読み込み表示させてます。

noscriptタグによる画像読み込み回避

下記のように画像のアドレス（imgタグ）を<noscript>と</noscript>で囲うと画像の読み込みを回避できます。

<noscript><img alt="hoge1" height="336" src="https://blogger.googleusercontent.com/img/b/…/hoge1.jpg" width="640"/></noscript>

とても簡単ですね。

この方法を使うと、記事内で表示するアイキャッチ画像と記事のサムネイル画像を別々のもに分けることも可能となります。

但し、先に説明しましたが、JetThemeはnoscriptタグ内の画像を遅延表示してしまうので、アイキャッチ画像を表示したくない場合はdisplay: noneを入れる必要があります。

えっ！、display: noneはデメリットがあると言っているに矛盾しますね。💦

本当はcontent-visibility: hiddenを使いたいのですが、まだChromeとEdgeくらいしか正式サポートされてません。SafariとFirefoxがサポート対象になったら、これに修正しようと思ってます。😅

その他の方法

あまりオススメはしませんが、 下記のようにloading="lazy"とdisplay: noneの合せ技でも画像の読み込みを回避できます。

<img alt="hoge1" loading="lazy"  src="https://blogger.googleusercontent.com/img/b/…/hoge1.jpg" style="display: none;" />

本来ファーストビューの画像にloading="lazy"を適用するのは好ましくないので、今後チェックが厳しくなると指摘されるのでは、と想像してます。 

まとめ

noscriptタグを活用すると、画像の読み込みを回避してアイキャッチ画像が生成できるため、ページスピードの低下を抑制できることが分かりました。

0.1秒でもページスピードを早くしたい場合は、役に立つのではと思います。

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。