Bloggerのサムネイルにalt属性を入れる方法【Bing Webmaster Toolsのエラー対策②】

【 < h1 > が多数あります】、【画像に < alt= > がありません】、【タイトルが短すぎます】、Bingウェブマスターツールに３つもダメ出しされてしまいました。

【< h1 >が多数あります】は解決できたので、次は【画像に< alt = >がありません】と闘います。

画像に< alt= >がありませんエラー

< br >で改行していたのを全部直したときにも見直してるので、画像にalt属性(代替テキスト)は全て入っているはずなんですけど、なぜか警告されています。

alt属性とは、<img>タグ内に記述する画像の代わりとなるテキスト情報のことです。検索エンジンに画像の内容を伝えるためには必須です。

トップページのサムネイルだった

気づきました。エラー詳細を見ると常に10個のエラーです。トップページの記事リストも10件、サムネイル画像にalt属性がないと言われてるんだ！！

また、Geminiに相談してみました。

👉わたし：「記事の画像にはalt入力してるけど記事リストにも入れるの？」
✦Gemini：「その2つはBloggerのシステム上、別物として扱われます」
👉わたし：「でも書き込めないよ？」
✦Gemini：「<img expr:src='data:post.thumbnailUrl' /> を見つけて以下のように書き換えてください」

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' />

それでも< alt= >は出てこない

書き換えた後で検証してみましたが alt は出てきません。

サムネイル画像にalt属性がない

👉わたし：「書き換えたけど alt 出てこないけど？」
✦Gemini：「その他に expr:src='data:post.thumbnailUrl' があるはずです」
👉わたし：「全部見たけどないよ」
✦Gemini：「Bloggerでは自動生成される <img> に alt を直接指定できないことがあります」
✦Gemini：「JavaScriptで強制的に alt を入れるコードを追加しましょう」

最終的に追加したコード

今回は２時間くらいで出来ました。Geminiが教えてくれたコードを< body >内に追加したら記事タイトルが alt属性として追加されました。Geminiと意気投合(？)してきた気がする。

⚠️バックアップを取ってからお試し下さい

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
  // 記事リスト内の画像（img）をすべて取得
  var images = document.querySelectorAll('.articles-wrap img, .mobile-index-contents img');
  images.forEach(function(img) {
    // もしaltが空か無い場合、親要素や近くにある記事タイトルを探して入れる
    if (!img.getAttribute('alt')) {
      var postTitle = img.closest('.articles-wrap, .mobile-index-contents').querySelector('.article-title, .post-title');
      if (postTitle) {
        img.setAttribute('alt', postTitle.innerText.trim());
      }
    }
  });
});
//]]>
</script>

※ .articles-wrap や .article-title は、お使いのテンプレート独自のクラス名である可能性があります。もし動かない場合は、自分のテンプレートのクラス名に合わせて書き換えてください。

< alt= >出ました

コードを追加してから検証したら、PCでもスマホでもaltが追加されていました。これでエラーにはならないです。

自動でalt属性が追加されている

前回の< h1 >が大変すぎたので覚悟してたけど、比べ物にならないくらい楽だった。

【タイトルが短すぎます】に続きます。

💖 読んでいただき有難うございました。