この記事を書いた人
ショップ店長 ミキ
miki
公開日:2015.02.05 / 最終更新日:2020/03/04
こんにちは、IT+(アイティプラス)からECコンサルを受けたネットショップ店長のミキです。
今回の特集では無料でできるSEO対策をご紹介しています。
無料で行うSEO対策には色々なものがありますが、今回はその中から特に「初心者の方でもすぐに取り組めるSEO」として、以下の9つをご紹介します。
(はじめに今すぐできる!無料で行うネットショップのSEO対策~SEOとはをご覧いただいてから読み進めていただくと理解が深まります!)
(以前の記事には各項目よりリンクしています)
本日は6の画像リンク(alt属性)についてです。
画像リンクとは、クリックすることが可能でそれ自体がリンクとなっている画像のことです。
例えば冒頭に「0.SEOとは」とありますが、「SEOとは」という文字にリンクが貼られたものをテキストリンクといいます。対して
上記の画像をクリックしてみてください。
0.SEOとはと同じリンク先を画像に設定しています。
このように別のページへのリンクが設定されている画像を、画像リンクと言います。
ネットショップでどのような場合に画像リンクを使用するかと言うと、例えばトップページにいくつかのバナーを配置することがあると思います。このバナー画像には必ず画像リンクを設定して特集ページやカテゴリーページに移動できるよう設定しますね。
他にはおすすめの商品やカテゴリー画像をサイドバーに設置し、いつでもお客様が目当てのページに移動しやすいように画像リンクを貼る場合もあるでしょう。
ブログで商品を紹介する際などはその商品ページへのリンクを画像に設定しておくことで、ショップへの集客の窓口となりますね。
レンタルカートの場合、画像リンクの設定方法を知らなくても簡単にリンク先が設定できるようになっている場合が殆どですが、自分でも画像リンクの設定方法を知っておくとなにかと便利です。
(ブログでの画像リンクの設定方法はここでは割愛しますが、アメブロに関しては以前もご紹介しました、やさしいブログの作り方をご参照下さい)
そして画像リンクを設定する際に、是非忘れないでいただきたいのがalt(オルト、と読みます)属性です。
Googleは画像に表示された内容や、どのような画像なのか?について理解することができないと言われています。
ですので検索エンジンだけを意識するならば、画像を使わずにテキストのみで構成することが望ましいということになります。
ですがユーザーを意識した場合に画像の使用はかかせませんよね。
そこでこのalt属性が意味をもちます。
画像を読み取ることのできない検索エンジンに対してこのalt属性を指定することで、ユーザーと検索エンジンの双方に同じ情報を伝えることができるのです。(SEOの原則の1つに、ユーザーと検索エンジンに同じ情報を参照できる様にする、という考え方があります)
代替テキスト(画像が何らかの理由で表示されない場合に、代わりに表示されるテキスト)という役割もあるのですが、それよりは検索エンジン向けに行うものだという認識で問題ないかと思います。
画像リンクの際に指定したalt属性は、テキストリンクの<アンカーテキスト>と同様の意味を持ちます。
参照記事:今すぐできる!無料で行うネットショップのSEO対策~⑤アンカーテキスト
もしも画像にalt属性が指定されていない場合、テキストリンクで例えると このように空欄にリンクが貼られているようなものです。(空欄には実際に当ブログトップページへのリンクが貼ってあります)
アンカーテキストの目的が、ユーザーと検索エンジン双方にリンク先ページの情報を伝えることであるように、画像リンクの場合でもその目的が果たされるべきです。
ユーザーに対しては画像そのものがリンク先ページの情報を伝えるとして、画像の内容を理解できない検索エンジンに対してはalt属性という「画像版のアンカーテキスト」を指定することで、無事にその目的が果たせるという訳です。
そして適切なアンカーテキストがSEOに効果を持つように、画像リンクのalt属性を正しく表記することで同様の効果が得られると考えられます。
画像リンクの設定方法はブログサービスにより異なりますが、HTMLタグとしては以下の通りです。
<img src=”(場所+画像ファイル名)” alt=”画像代替文字” >
参照記事:初心者必見!読者にも検索エンジンにも好かれるブログの作り方(番外編)~HTMLタグ~
このalt=以下の””の間に入力したテキストがalt属性になります。
HTMLの編集画面で直接入力も可能ですし、例えばWordPressではメディア挿入画面の、
赤枠で囲った「代替テキスト」欄に記入した文字がalt属性となります。
またアメブロでは画像のアップロード時に、<タイトル>の枠内に入力したテキストがalt属性となります。
画像を本文に挿入したあとでHTML表示に切り替えると確認することができますので、是非やってみて下さい。
この記事を書いた人
ショップ店長 ミキ
miki