HTMLで画像を表示する

　画像を表示するには、<img>タグを使います。今回も、SEOを絡めて説明しましょう。

写真やイラストなどの画像を表示する時に<img>タグが使われます。この<img>タグにはいくつかの属性が指定できます。属性はたくさんありますが、今回は主に利用するタグだけを説明します。なので詳しくはコチラを参照ください。

属性	用途
src属性	画像ファイルをURLで指定
height属性	画像表示の高さをピクセル値で指定
width属性	画像表示の幅をピクセル値で指定
alt属性	画像の替わりに表示される文字列

src属性は画像ファイルをURLで示しますので、他のサイトでリンク可能な画像を指定することができます。以下の例は、Wikipediaのイメージをリンクとして利用した場合です。
例：
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Html-source-code3.png"/>
このHTMLのコードがブラウザにより下記のように表示されます。

Wikipedia HTMLのページより

注意！リンク先がリンクを認めていない場合、無断リンクは行わないでください！

また、前回記事でも書きましたが、ファイル名もキーワードとして扱われるため、具体性がわかるようなファイル名に変更する事をオススメします。

hright属性とwidth属性は元画像が大きな画像の場合に縮小して表示させたい時に表示したい大きさを指定します。

alt属性は画像を表示しない、或いはできない場合に替わりにalt属性で指定した文字列を表示できますが、実はこの文字列も検索キーワードとして扱われ、画像検索時のインデックスとして利用されます。ただし、alt属性も多くの情報を詰め込むとスパム扱いされます。
　これは、alt属性の文字列が視覚障害者への読み上げテキストにも利用されるため厳しく判断しているようです。

スパム扱いされそうな例：

この画像表示を下記のように記述すると。。。スパム扱いされるかも。。。

 

<img src="かわいい子猫.png" alt="子猫 猫の赤ちゃん 小さな子猫 メインクーン スコティッシュフォールド アメショ ノルウェージャンフォレストキャット シャム シンガプーラ キャット フード キャットフード 激安 子猫の餌"/>

　src属性とalt属性でキーワードを設定できますが、ページ全体と調和するようなキーワードになるよう意識して設定してください。お客様が検索を行う時、より関連性の高い検索結果として上位に表示されるようになります。

船橋の頭脳
Lightning Brains