BLOG

ブログ

TOP

BLOG

無料で行うネットショップのSEO対策(6) 画像のalt属性

すべてStudio
Studioテンプレート
Studioはじめてみた
Shopify
ネットショップ
デザイン
MA/CRM
初心者EC
世界一周

2024/1/26

[ 初回公開日:

無料で行うネットショップのSEO対策(6) 画像のalt属性

こんにちは、IT+(アイティプラス)からECコンサルを受けたネットショップ店長のミキです。

今回の特集では無料でできるSEO対策をご紹介しています。 無料で行うSEO対策には色々なものがありますが、今回はその中から特に「初心者の方でもすぐに取り組めるSEO」として、以下の9つをご紹介します。 (はじめに今すぐできる!無料で行うネットショップのSEO対策~SEOとはをご覧いただいてから読み進めていただくと理解が深まります!)

  1. タイトル

  2. ディスクリプション

  3. URLの構造

  4. コンテンツ

  5. アンカーテキスト(リンク)

  6. 画像リンク(alt属性)

  7. 見出しタグ

  8. アナリティクス

  9. ウェブマスターツール

(以前の記事には各項目よりリンクしています) 本日は6の画像リンク(alt属性)についてです。

1、画像リンクとは

画像リンクとは、クリックすることが可能でそれ自体がリンクとなっている画像のことです。 例えば冒頭に「0.SEOとは」とありますが、「SEOとは」という文字にリンクが貼られたものをテキストリンクといいます。対して 今すぐできる!無料で行うネットショップのSEO対策~SEOとは

上記の画像をクリックしてみてください。 0.SEOとはと同じリンク先を画像に設定しています。 このように別のページへのリンクが設定されている画像を、画像リンクと言います。

2、画像リンクの使い方

ネットショップでどのような場合に画像リンクを使用するかと言うと、例えばトップページにいくつかのバナーを配置することがあると思います。このバナー画像には必ず画像リンクを設定して特集ページやカテゴリーページに移動できるよう設定しますね。 他にはおすすめの商品やカテゴリー画像をサイドバーに設置し、いつでもお客様が目当てのページに移動しやすいように画像リンクを貼る場合もあるでしょう。 ブログで商品を紹介する際などはその商品ページへのリンクを画像に設定しておくことで、ショップへの集客の窓口となりますね。 レンタルカートの場合、画像リンクの設定方法を知らなくても簡単にリンク先が設定できるようになっている場合が殆どですが、自分でも画像リンクの設定方法を知っておくとなにかと便利です。 (ブログでの画像リンクの設定方法はここでは割愛しますが、アメブロに関しては以前もご紹介しました、やさしいブログの作り方をご参照下さい) そして画像リンクを設定する際に、是非忘れないでいただきたいのがalt(オルト、と読みます)属性です。

3、alt属性とは

Googleは画像に表示された内容や、どのような画像なのか?について理解することができないと言われています。 ですので検索エンジンだけを意識するならば、画像を使わずにテキストのみで構成することが望ましいということになります。 ですがユーザーを意識した場合に画像の使用はかかせませんよね。 そこでこのalt属性が意味をもちます。 画像を読み取ることのできない検索エンジンに対してこのalt属性を指定することで、ユーザーと検索エンジンの双方に同じ情報を伝えることができるのです。(SEOの原則の1つに、ユーザーと検索エンジンに同じ情報を参照できる様にする、という考え方があります) 代替テキスト(画像が何らかの理由で表示されない場合に、代わりに表示されるテキスト)という役割もあるのですが、それよりは検索エンジン向けに行うものだという認識で問題ないかと思います。

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

画像リンクの際に指定したalt属性は、テキストリンクの<アンカーテキスト>と同様の意味を持ちます。 参照記事:今すぐできる!無料で行うネットショップのSEO対策~⑤アンカーテキスト もしも画像にalt属性が指定されていない場合、テキストリンクで例えると  このように空欄にリンクが貼られているようなものです。(空欄には実際に当ブログトップページへのリンクが貼ってあります) アンカーテキストの目的が、ユーザーと検索エンジン双方にリンク先ページの情報を伝えることであるように、画像リンクの場合でもその目的が果たされるべきです。 ユーザーに対しては画像そのものがリンク先ページの情報を伝えるとして、画像の内容を理解できない検索エンジンに対してはalt属性という「画像版のアンカーテキスト」を指定することで、無事にその目的が果たせるという訳です。 そして適切なアンカーテキストがSEOに効果を持つように、画像リンクのalt属性を正しく表記することで同様の効果が得られると考えられます。

5、alt属性の設定方法

画像リンクの設定方法はブログサービスにより異なりますが、HTMLタグとしては以下の通りです。 <img src=”(場所+画像ファイル名)” alt=”画像代替文字” > 参照記事:初心者必見!読者にも検索エンジンにも好かれるブログの作り方(番外編)~HTMLタグ~ このalt=以下の””の間に入力したテキストがalt属性になります。

HTMLの編集画面で直接入力も可能ですし、例えばWordPressではメディア挿入画面の、 img_alt 赤枠で囲った「代替テキスト」欄に記入した文字がalt属性となります。 またアメブロでは画像のアップロード時に、<タイトル>の枠内に入力したテキストがalt属性となります。 alt 画像を本文に挿入したあとでHTML表示に切り替えると確認することができますので、是非やってみて下さい。

6、まとめ

  • Googleは画像の内容を理解できないので、alt属性で代替テキストを用意する

  •  画像リンクにはalt属性を指定すると、アンカーテキストと同様にSEOの効果が期待できる

この記事を書いた人

初心者EC一覧に戻る
一覧に戻る

おすすめ記事

CONTACT

お問い合わせ・ご相談はこちら

IT+

株式会社アイティプラス

〒150-0001 東京都渋谷区神宮前3-25-18
THE SHARE 2F

チャネルトーク

チャネルトーク認定パートナー

Shopify Partners

shopify認定パートナー

Studio Templates

「Studio Store」にて、テンプレート販売中

STUDIOテンプレート 和食
STUDIOテンプレート 病院
STUDIOテンプレート 和食

©2014  ITPLUS, Inc.