ノーワーク・ベストライフ

働かない生き方を構築するためのウェブメディア。

はてなブログの画像に「alt属性」を設定する方法とメリット

ALT属性 設定方法 メリット

突然ですが、下の2枚の画像。何が違うのか?分かりますか?

イケメン 坊主 画像

f:id:matomepro:20180704015526j:plain

 

今回は、上の2枚の画像が全く別物であることを教えてくれる「alt属性」についてご説明します。ブロガーさんやウェブサイトの制作者、企業サイトのウェブ担当の方は必見の情報ですのでご覧ください。

この記事の内容を知ることによって、ブログへのアクセス数が増えたり、自分のサイトが検索エンジンで今までよりも上位に表示されるようになったりします。

alt属性とは?ブログの画像にalt属性を付与するメリット

そもそもalt属性ってなに?という方がほとんどだと思います。ブログ歴〇年という方でも、はじめて聞いた方がいるかもしれません。それくらいマイナーな情報になります。

 

alt属性とは、ブログやウェブサイトに使用する”画像”に「名前」を付けることです。

 

デジカメやスマホで撮影した写真、それからパソコン内に保存している画像には、いつ・どこで撮った写真かわかるようにするために、それぞれの画像に名前を付ける方が多いのではないでしょうか?

alt設定 説明用 名前

これと同じことを、ブログに載せる画像ごとに行います。

 

alt属性を設定するメリット

ふつう、Googleなどの検索エンジンはブログ内の文章を読み取ることで

「このブログは〇〇について書かれている」

「この記事は〇✖について解説されている」

といった情報を読み取って検索順位の参考にしています。

しかし、同じページ内の画像については何の画像が掲載されているのかを判断できないと言われています。文章は読めるけど、画像の認識は得意ではないのです。

 

ところが、ブログに掲載する画像にalt属性を設定することにより、検索エンジンがあなたのブログを巡回した際、「このブログには〇〇の画像が載せられているんだな」と判断できるようになります。

これにより、あなたのブログの検索順位が上昇し、検索エンジンからのアクセスを集めやすくなるんです。

 

なぜなら、もともと文章でしか判断できなかった記事の内容に加えて「画像の名前(alt属性)」という情報が追加されるため、よくわからない画像(alt属性未設定)を載せているブログよりもより詳しいブログだと判断されるからです。

 

もしも同じテーマについて書かれたブログが2つあり、書かれている内容が同じくらいの詳しさで、さらにブログ内に使われている画像の枚数も同じだった場合は、画像にalt属性を設定しているブログの方が検索順位が上になります。

 

さらに、alt属性を付与することで何の画像なのか明確になるため、画像検索をした際にはあなたのブログで使われている画像が検索結果に出てくるようになります。

その結果、画像検索からブログへ訪問してくる人の数が増える効果もあります

 

alt属性を設定する方法

それでは本題の、alt属性を設定する方法です。

当ブログは はてなブログを利用しているので、はてなブログで説明していきます。

 

画像を選ぶ

まずは画像を選びます。

記事に貼り付ける画像を選ぶのですが、その際、「貼り付け時に詳細を設定する」にチェックを入れておきます。

画像貼り付け チェック はてなブログ alt属性

 

「貼り付け時に詳細を設定する」をチェックした状態で「選択した画像を貼り付け」をクリックすると、次のような画面が出てきます。「画像にalt属性を指定する(上級者向け」にチェックを入れてください。 

はてなブログ alt属性 チェック

 

 チェックを入れるとalt属性の入力蘭が出てくるので、画像の内容を説明するような単語やキーワード、短い文章を入力していきます。

alt属性 はてなブログ 入力

 

 今回は坊主頭の画像だったので、「イケメン 坊主 画像」と入力しておきました。

これでGoogleの画像検索で「イケメン 坊主」と検索された際、確実ではありませんが僕の画像が検索結果に出てくるようになります。イケメンの坊主画像を探している美女が僕の坊主頭に興味を持ってくれれば、きっと僕のブログに訪問してくれるはずです。グッヘッヘ。

イケメン 坊主 画像の検索結果

 

あとは「記事編集画面に貼り付ける」をクリックした後、ブログを公開すればOKです。

 

ところで、ブログを書いている画面では、画像にalt属性を設定したかどうかを簡単に見分けることができません。

ためしに「alt属性の設定あり」「設定なし」の画像を貼り付けてみましたが、このとおり。

alt設定 説明 坊主画像 比較

全然見分けがつかないですね…。

 

でもこうやってHTMLモードにすると、一目瞭然。

alt設定 画像 説明用 HTML 比較

alt属性を設定した上の画像のHTMLではちゃんと「イケメン 坊主 画像」の説明が入っていますが、altを設定していない下の画像のHTMLでは特に何も説明されていないことがわかります。

この「画像の説明(alt属性)の有無」が積もりに積もって、将来的にはアクセス数の大きな差となって現れるようになります。

 

WordPressや他のブログサービスの場合

 はてなブログと同じように、WordPressや他のブログサービスでも画像にalt属性を設定できます。

WordPressの場合はメディア追加時に「代替テキスト」の欄にalt属性を設定してください。

WordPress alt設定


ライブドアブログの場合はアップロード画像に付けていた名前がそのままalt設定になります。画像にalt属性を付け加えたい場合は、ブログにアップロードする前に一旦パソコン内などに保存し、画像の名前を変えてからアップロードすると良いでしょう。

いちおうHTML編集モードからもaltを変更できます。alt=に続く「" "」に囲まれた部分を編集してください。

 

ライブドアブログ alt属性


FC2やアメーバブログなど、他のブログサービスも似たような方法でalt属性を設定できます。

 

まとめ

ひと手間加えてalt属性を設定することにより、ブログへのアクセス数が増えたり検索順位が上昇したりします。

画像ごとに設定するのは大変ですが、検索順位に影響する大事な設定ですので面倒くさがらずに設定してみてください。

 

▼こちらのノウハウも人気です