Googleが伝える、適切な「alt属性の入力」のススメ

Googleが伝える、適切な「alt属性の入力」のススメ

桜の下で写真を撮っている女性。お気に入りの画像をウェブサイトに投稿したい

 

お気に入りの画像をどんどん使ってみよう!

 

 

alt属性を正しく理解して、画像に適切な「画像の説明」を行うことで、「よりSEOに強いサイト」を作ることができます。単に画像の説明をする・・ということではなく、サイトの中の画像としての説明が求められます。具体的な例を使って、より効果的な画像の説明のコツをご説明します。

 

 

「alt属性」を正しく理解するための もくじ

 

 

○適切な「alt属性」の入力はできていますか?
  ・「alt属性」とは何?
  ・具体的に何が適切な内容か考えてみる

 

 

 

適切な「alt属性」の入力はできていますか?

 

 

「alt属性」とは何?

 

 

 

本を読む浴衣の女性。横顔が美しい

 

上の画像を表示させるために、下の
ような記述をソフト上に入れています。

 

 

<img src="http://homepagenotukurikata.com/img/yukata.jpg" alt="浴衣の女性" />

 

 

このように<img・・・で始まる記述は
「img画像」とか「img属性」と一般的
に呼ばれ、画像を表示させるための
命令文です。

 

このimg画像の記述の中身は、下の
通り「画像のURL」の部分と、
緑色で表示した「alt属性」の部分
に分かれます。

 

 

<img src="画像のURL"alt="○○○"/>

 

 

※画像URLについては別ページで説明してます

 

  → 10分でできる!バナーの貼りつけ

 

 

alt属性(オルト属性)とは、そもそも
画像を閲覧することができない環境
でも、情報をテキストや音声で得る
ことが、出来るようにするための機能です。

 

上の○○○には、「浴衣の女性」のように

 

写真の内容を適切に反映した
コメントを入力してゆきます。

 

「意味のない記号」などの画像で
あれば、特に内容を知らせる必要
がありません。

 

この場合は、alt=""(ブランク)でも
問題はありませんが、できる限り
適切なコメントを入れるのが望ま
しいです。

 

 

※Googleウェブマスターより抜粋
alt属性のコメントの説明。適切な記載と不適切な記載の説明画像
Googleウェブマスターツール(画像についての記載)

 

 

適切な内容はできる限り正確に記載
したほうがいいということになりますので

 

最初に例に出した「浴衣の女性」は
「本を読む浴衣の女性。横顔が美しい」
という記載ぐらいまで詳しく修正したほう
がいいということになりますね。
(もう実際に修正しています)

 

一方で、検索エンジンのクローラーに
写真の内容を知らせる目的でも、この
alt属性は重要な役割を担っています。

 

特に写真が多くてテキスト文字が少ない
ページの場合は、alt属性の設定を適切
に行うことで、ページの内容を伝える
こともできます。

 

きちんと(写真の内容に合った)キーワード
を入れてSEO対策を行いましょう。

 

また、あなたの画像を守るためにも
alt属性の入力を詳しくしておいた
方がいいといいます。

 

画像のコピーは案外多く出回っている
らしいです。あなたのオリジナル画像が
勝手にコピーされて使われている場合
に、alt属性の記載内容もオリジナル
画像の判別に使用されます。

 

不正利用防止の観点からも、きちんと
入力しておかないといけませんね。

 

 

 

具体的に何が適切な内容か考えてみる

 

 

 

私のサイトの画像をピックアップして
どういうalt属性の内容記載が適切
か考えてみました。

 

 

<単純に画像だけの説明>
alt属性を考えるための画像。お金を持ってニヤついている女性

 

○お金を持ってニヤついている女性
○女性が扇形にお金を広げ微笑んでいる
○経理担当の女性が、お金を数えているときにこちらを向いて微笑んだ
・・・

 

 

などなど・・想像すればいくらでも
コメントできそうですね。

 

では、同じ写真でも、前後の文章
によって記載内容が変わってきます。

 

 

<サイトの中の画像としての説明>
alt属性を考えるための画像。「副業でこれだけ稼ぎましたよ」と、お金を持ってニヤついている女性

 

○「副業でこれだけ稼ぎましたよ」と、お金を持ってニヤついている女性
○「ネットビジネスをするとこれだけ稼げるんだよ」と稼いだお金を広げ微笑む女性
○「主人がネットビジネスで年収一千万稼いでます」とお金を広げて幸せそうな女性
・・・

 

 

「alt属性は、サイトの中の画像の説明」
なので、上の例で考えたように、サイトの
中にある画像の説明として最も適切な
文章を入れていきます。

 

「単に写真の説明」とか「記載している
ページのテーマ」を記入するとかでは、
「画像を適切に説明した」ことにはなら
ないのですね。

 

 

 

写真素材についてご案内します

 

 →サイトデザインを劇的に変化させる写真素材

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

 

 

よく読まれる関連ページ

写真素材

サイトデザインを劇的に変化させる写真素材

オリジナルロゴ

オリジナルロゴのないサイトはこんなにも寂しい

画像取込

webページの画像を取り込む【おすすめ無料ソフト】

ロゴの貼り付け

ロゴの貼り付けが困難を極めた理由

 

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです



Googleが伝える、適切な「alt属性の入力」のススメ関連ページ

絶対に間違いのないSEO最新マニュアル
全13工程でサイト改善!「検索エンジン最適化スターターガイド」
3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
アクセスアップのためにやっちゃった失敗をお教えします
被リンクについて最低限知っておくべき10のポイント
5分でわかる!具体的相互リンクの手順
サイト公開するなら、最低限canonicalタグを使いこなせ!
超簡単!重複コンテンツ整理のための.htaccess設定方法
あなたは外部Javascriptを利用する目的を知っていますか?
よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う
301リダイレクトで個別ページのURLを整理できる
みんなに伝えたい!正しいサイトマップの「作り方」「送り方」
クリック率アップ!リッチスニペット導入でライバルサイトに差をつけろ
パンくずリストをリッチスニペットで表現してみた!
お手軽にリッチスニペット!構造化マークアップ支援ツール
進化しているデータハイライターを、あなたにもぜひ体験してほしい
とにかく目立つ!リッチスニペット著者情報の作り方
レシピを出すなら試したい!リッチスニペットを使った目立つ検索表示
rel=”nofollow”使いこなし術を解説!正しい使い方をご存知?
これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説
エラーページを処理する5つの方法
SEOに効果あり!404エラーページのカスタマイズ
クロールの効率性を追求!robots.txt
よくわかる!noindexメタタグの正しい使い方
たった1分で劇的に改善!ページスピード高速化の方法
3行入力するだけ!誰でもできる圧縮によるサイト高速化
もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化
正しい対処の仕方をご存知ですか?放置できないソフト404エラー
鳥肌が立つほどカンタン!1クリックで終わる表示速度高速化
「誘導ページ」でペナルティを受けないための5つのチェックポイント
あなたのサイトは「モバイルフレンドリー」ですか?
rel="canonical"をもっともっと知りたい!
ホームページ、ブログの削除のしかた

 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ