ゆうらり Happy Smile
alt属性がないimg要素にJavaScriptで「alt=」を自動挿入する方法

alt属性がないimg要素にJavaScriptで「alt=」を自動挿入する方法

FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など
2019/11/04
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#javascript #JS #alt属性 #alt属性を自動挿入する方法 #alt属性をimg要素に自動挿入するJS #alt属性自動挿入 #img_alt_js #FC2ブログ #ブログカスタマイズ #ウェブデザイン

javascript


こんにちは。FC2ブログゆうらりハッピースマイル』の管理人Mです。


先日の記事で、Google Search Consoleグーグルサーチコンソール)からガバレッジエラーページを大量に指摘され、困っていることを書きました。


Google Chrome「混在コンテンツブロック強化」の影響か?要対策だな…

FC2ブログ『ゆうらりハッピースマイル』の管理人Mです。ここ最近、ブログ更新が思うように進みません。体調が悪いことも理由のひとつではあるのですが、それ以外にも厄介な問題で頭を悩ませているところです。実は、Google Search Console (グーグルサーチコンソール)の検索パフォーマンスが急速に下がっておりまして…。このブログに対するガバレッジで、毎日もの凄いページ数がエラーのあるページとして警告されてしまっている...


僕の場合、そのほとんどは、記事を書く際に挿入した画像が原因なんです。画像のimgタグになぜかalt属性の抜けているものが無数に存在しておりまして…。


理由としては、FC2ブログを書くのにスマホアプリだけ使って更新していた時期があったから。アプリで画像をアップロードするとalt属性が入らないんですね。その当時はそんなことを気にせずブログをやってましたから(汗)


おかげで、エラーの指摘されたウェブページを修正する日々。しかし、毎日のようにエラーページが増え続けるばかりで、僕の能力ではまったく追いつきません(~_~;)


とりあえず、修正を急かされずに応急処置を施す手段はないものか?


そこで思いついたのが、alt属性がないimg要素にJavaScriptで「alt=」を自動挿入する方法でした。

スポンサードリンク

alt属性がなかったらimg要素に「alt=」を自動挿入するJavaScript

僕は JavaScript の知識が詳しくないので、とりあえずネットでくまなく調べてみることにしたんです。しかし、ウェブ検索して行き当たったのはどれも WordPress のものばかり。あとは、 jQuery を導入しておこなう方法がわずかに存在するだけでした。


しかし、応急処置として alt属性を入れるだけのためにわざわざ jQuery を使うなんてどうなの?と感じた僕は、いつも FC2ブログテンプレートでお世話になる Akiraさんに質問してみました。


すると、 Akiraさんはいつものように親切な対応をして下さり、ネイティブ JavaScript記述例まで教えていただきました(^^)


困っていたので、本当に感謝の言葉も見つかりません。


そして、教えてもらったネイティブ JS は以下の通りです。


<script>for(var d=document.getElementsByTagName("img"),i=0;i<d.length;i++)d[i].hasAttribute("alt")||d[i].setAttribute("alt","");</script>

Google Search Console から続いていたガバレッジエラーの通知が止まった

JS を記述したら、あれほどひっきりなしに続いていた Google Search Console からのエラー通知が止まった( ̄O ̄;)


一時的なのかも分かりませんが、とりあえずおまじない的な JS を記述したおかげで精神的な平安を得ることが出来ました(^^)


これで、あとは自分のペースでゆっくりと修正作業が進められそうです♪

注意点:真似される場合はすべて自己責任で

今回、僕がわざわざ JavaScript を使って alt属性を自動挿入したのは、このブログの記事数があまりにも多いから。


したがって、この方法は他のブロガーさんにおすすめすることが出来ません。基本はやっぱり手作業で修正するのが一番なんですね。 JS を使えばその分だけページ読み込み速度にも悪影響が及びますから…。


もしも真似なさる場合は、動作確認的な問題も含め、すべて自己責任でお願いします。何か質問されても、僕のレベルではお答えする知識もありませんし(^_^;)

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事ランキング
FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など