SVG画像を使う場合SEO検索で気を付ける事

SVG画像を使う場合SEO検索で気を付ける事

SVG画像を使う場合SEO検索で気を付ける事

SVG画像は演算により自在に拡大縮小されるベクター形式の画像です。

HTMLに直接埋め込むと「テキストとしてのSEO」の助けになり、imgでSVG画像を参照する場合は画像SEOと同様になります。

シンプルなロゴマークやアイコンデータを表示する際に便利でレスポンシブデザインにマッチしています。

SEOにおけるSVG画像の重要なポイント

SVG画像を使う場合にSEOで気を付けるべき点を先に箇条書きでまとめますと以下の通りです。

・GoogleはHTML内に直接記述されたSVG画像コードを画像として認識しません。
・Googleはimgタグで参照されたSVG画像コードは画像として認識します。

・直接記述されたSVGコードの各要素はテキストSEOに有効です。
・imgタグで参照されたSVG画像は、画像SEOに有効です。

インライン(直接記述)で書くと画像と認識されない

インラインで記述されたSVG画像は、画像ではなくテキストコードであると判断されます。

インラインの場合、記述されたtitleやdescタグで画像に対するSEO効果が上がる訳ではありません。

titleやdescタグは画像の代替ではなくあくまでHTMLテキストの一部として判断される事になります。

通常の画像と違って計算コードが並ぶので、運営者がソース上で画像を把握するために利用される事が多いです。

xlinkなどの埋込リンクの効果は「ゼロ」と考える必要があります。

逆に言えばobjectやインラインでSVGデータ表示をした場合は、テキストSEOとしての影響があると考えられますね。

ちゃんと協調スニペットにも表示されますからね。

imgタグで書くと通常通り画像と認識

SVGデータを画像として認識させたい場合はimgタグで参照するか、objectタグとimgタグを併用する必要があります。

従来のimgタグでSVG画像を読み込んでいるだけですので、Altタグが代替テキストになります。

詳細は、SEO向け画像の工夫urlやテキストで有利になる10個のポイントをご覧ください。

SVG画像とは

SVGは「Scalable Vector Graphics」の略称です。

WEBサイト上のあらゆる環境に応じ、サイズの拡大縮小ができるベクター画像形式のことをSVG画像と呼んでいます。

ベクター画像とは演算計算により画像を出力させる方法です(ベクトルデータとも呼ばれます)。

ベクター画像フォーマットのメリット

・1つの画像でスマホからRetina画面までレスポンシブルに対応
・色の変更やサイズの調整が後からでもできる
・アニメーション効果や透過も設定できる
・いろいろな要素を埋め込む事ができる
・シンプルなものは得意だが写真画像などには不向き

ベクター画像フォーマットのデメリット

・アイコンなどのシンプルな造形に効果を発揮するが、写真のような多くの画素が必要な画像には不向き
・ブラウザがレンダリングする際に毎回計算が必要
・SVG画像がたくさん並ぶページは重くなる傾向がある

それに対し今も一般的に使っているGIF・JPG・PNGはいずれもビットマップ形式の画像と呼ばれ、画像を点の集合で表現しています。

ビットマップ形式とベクター形式

ビットマップ形式はその性質上、画像を構成しているピクセル数が作成時点で決まっています。

ですので想定サイズを超過(拡大)してしまうと画像が荒くなり、ぼやけた状態になってしまいます。

それに対してベクター形式フォーマットのSVG画像は拡大縮小に柔軟に対応します。

演算により効率良く形や色を表現するので、サイズ変更がされてもその都度鮮明な画像を維持できるのです。

ここが通常のGIF・JPG・PNGを使うよりもSVG画像を使う方が利点となる部分ですね。

SVGの2種類の書き方

SVG画像の具体的な記述の仕方については割愛しますが、大きく分けて2種類の記述方法があります。

インラインによるSVG画像の記述例

<svg role="img" aria-labelledby="title desc"> <title>...</title> <desc>...</desc> <!-- コンテンツコードが入る位置 --> </svg>

上記がHTMLソース内にSVG画像を表示するコードを書いた場合です。

imgタグによるSVG画像の記述例

<img src="../images/image.svg" alt="SVGイメージ" title="SVGイメージ">

それに対して上記はimgタグの中でSVG画像を参照して表示させる場合になります。

SVGの構成要素

SVGはXMLをベースとしたベクター画像形式ですので、画像をレンダリングするのは「ドット」ではなく「コード計算」です。

画像を作成する計算コード以外に様々な要素を埋め込む事ができます。

・title要素
・desc要素
・Xlink要素
・etc

title要素がタイトルで、desc要素がディスクリプションの部分に相当します。

各要素に関する注意

上記はSVGの子要素として使用されますが、alt属性のように必須の要素ではありません。

title要素とdesc要素に囲まれた部分は画像としては出力されません。

title要素を使うときは、親要素の「最初の子要素」として記述するルールになっています。

SVG画像には「XLink」と呼ばれるリンクの埋め込みができる要素もあります。

SVG画像のテキスト要素はSEOに影響するか

シンプルな画像やアイコンを表示させる場合は、計算式により自由に可変するSVG画像を使った方が便利であると言えます。

ではSEOでも有利になるような、SVG画像を使う場合の「コツ」はあるのでしょうか。

SVG画像のコード内にいろいろな要素を追加できる訳ですから、工夫すれば画像のAltテキストよりもSEOに有効なのではないかと思いますよね。

SVGの代替テキストについて

通常imgタグの場合はaltタグテキストを設置して、検索エンジンとユーザーにその画像が何なのかを伝える事がSEO上有効とされています。

SVGはXMLで記述されるので最近のブラウザであれば必ず表示されます。その意味でalt文は必要ないと判断できます。

ではtitle要素・desc要素をうまく書く事がSEO評価の上昇につながるのでしょうか?

title・desc要素は開発者向けの情報

結論として、titleやdescの要素は代替テキストの働きはしません。

インラインで記述された場合には、各要素はSVGソース内を説明するタグとして働きます。

SVGはソースコードがずらっと並ぶので、開発者が「何の画像を出力しているのか」がわかるよう設定したテキスト、という事になります。

つまりtitleタグ等の要素にテキストを詰め込んでもSEO上意味がない事になりますね。

GoogleはSVG画像をどう見ているのか

実はSVG画像は、前項で説明した2つの書き方のタイプによって画像として「SEOに影響する・しない」が決まります。

この時コード内に書くtitle等の要素の有無は無関係です。

この判断を決めているのは、SEO順位を決めるGoogleです。

GoogleがこのSVG画像の書き方によって「画像である」・「画像でない」を決定しているのです。

画像として認識されればSEO効果が高くなる訳ではありません。画像として認識されるかされないかだけの違いです。

imgタグ内でSVG画像を表示した場合

検索エンジンはSVG画像の根幹となる「XMLでできたテキストデータ部分」を考慮しません。

判断材料としているのは最終的に画像としてレンダリングされた「SVG画像の状態のみ」です。

imgタグでSVG画像を読み込めば、XMLデータが露出しないので画像として判断されます。

インラインでSVGを直接表示した場合

逆にSVG画像をHTMLのソース内に直接(インライン)埋め込んだ場合、XMLコードが認識される代わりに「画像」としては認識されません。

その証拠にこの形式のままだと、Googleの画像検索に現れないのです。

インラインSVG例

<svg role="img" aria-label="test" xmlns="http://www.w3.org/2000/svg"> <title>title</title> <desc>description</desc> </svg>

この方法だと画像サイトマップを送信していてもGoogleには拾われる事は無いようです。

逆にタグやタグ内のテキストが認識され、スニペットに表示される事がわかっています。

この事からもインラインで埋め込まれたSVG画像は「テキスト」と判断され、「画像」とは認識されていないと判断できます。

インラインの場合は画像を出力しながらテキストSEOができる

インライン埋め込みの場合、titleタグやdescタグに記載された文章は「テキスト」として認識されます。

つまりSVG画像を表現しつつHTMLソース上テキストとしても利用できる訳ですから、SEOに影響すると考えましょう。

画像の代替テキストとしては使えないので、画像の価値を上げるものでは無いと言えます。

imgタグ埋め込みの場合は、titleタグ要素等は表に出ないので有効性はありません。

xlinkリンクも機能しない

同様にこのインライン埋め込み型の場合、Googleはxlinkもリンク対象として判断しておらずリンク先を辿りません。

ですのでSEO上一番重要なこの「リンクの価値」をこのxlinkで上げる事は出来ないと言えます。

外部・内部リンクの被リンク効果を期待する場合は、通常のimgタグ画像と同じように、<a href="#"><img src=""></a>で囲った方が良いです。

SVG画像をSEOに有効にするには

SVG画像として認識させるには、imgタグでSVG画像を読み込む事です。

つまりSVGのXMLデータを別に保存しておき、imgタグとして参照する訳ですね。

そうすればいつも通りimgタグとして、altタグやtitleタグが使えます。

SVG画像設置例

<img src="../images/image.svg" alt="SVGイメージ" title="SVGイメージ">

この様にしておけば、SVG画像フォーマットでGoogle画像検索に表示されますし、alt代替テキストのSEO効果が期待できます。

SVG画像の中にtitleタグやdescタグ等を入れる事ができますが、これらはimgタグにおけるaltテキストの役目は果たさないという事になります。

objectタグを使ったSVG画像の埋込

SVGを使用したインタラクティブコンテンツ・アニメーションを実現できるのは、objectタグで構成するか、インラインによるSVG埋込の場合のみです。

objectタグの場合もインライン同様に、画像クローラーであるGoogleImagebotが画像として認識しません。

ですのでGoogleImagebotが画像をインデックス登録できるように、次の工夫をしましょう。

objectタグとimgタグを重ねて使用する

<object type="image/svg+xml" data="../images/image.svg"> <img src="../images/image.svg" alt="SVGイメージ" title="SVGイメージ"> </object>

画像URLを画像専用のサイトマップに登録する

画像のサイトマップを作成して画像検索にヒットするようにGoogleへクロールしてもらいやすくします。

objectとimgで重複して読み込む場合の注意

上記の様に記述をすると、ブラウザが画像を2回読み込みしてしまう点には注意が必要ですね。

しかしこうすれば画像はWEBサーバーでキャッシュされますし、2回目の読込を高速化する事ができます。

二重読み込みは必須になりますが、ブラウザは2回目以降からこの画像をキャッシュから読み込みます。

グラフィック系のWEBサイトでインラインSVGを使用している場合は、このように上記objectタグとimgタグの2つを併用する事をお勧めします。

ロゴマーク画像検索流入によるSEO

別角度からのSEO手段として、ロゴマークなどの画像検索からの流入を見込む人もいるでしょう。

最近は企業サイトのロゴマーク部分にアニメーションを付けたSVG画像を設置する管理者が増えています。

SVG画像であればアニメーションの設置・編集などが比較的容易であるためですね。

何より企業のロゴマークが動的に動けば目を引く事も要因の一つでしょう。

ロゴマークをGoogle画像検索に登録させる

SEOの一環として画像検索による流入も狙っている場合は、当然の事ながらWEBサイトのロゴマークが画像検索に登録されなければなりません。

サイトのロゴ画像を検索するユーザーもいますので、ヒットすれば当然流入が見込める可能性もあります。

ところがこのロゴマークをSVGで作るにあたりインライン埋め込みをした方がSEOに有利だと思っている人がいるようです。

titleやdescなどでロゴマークの説明ができると思っているのでしょう。それは間違いです。

インラインによるSVG画像は画像検索に登録されない事は本記事で説明してきた通りです。

ロゴマークであってもimgタグ或いはobjectタグと併用して読込し、XMLコードを表に出さないようにして下さい。

まとめ:SVGを画像としては保存するが、コード自体は保存しない

おさらいをしましょう。ポイントは以下に集約されます。

・GoogleはHTML内に直接記述されたSVG画像コードを画像として認識しません。
・Googleはimgタグで参照されたSVG画像コードは画像として認識します。

Googleはあくまで画像と判別できるURLのみを検索結果に登録し、XMLデータのままでは保存・インデックスしないのです。

ですのでSVGファイルを別に配置してimgタグでSVG画像を参照する形にした方が良いです。

・直接記述されたSVGコードの各要素はテキストSEOに有効です。
・imgタグで参照されたSVG画像は、画像SEOに有効です。

ロゴ画像検索からのトラフィックを望む場合も、インラインではなくimgタグを介してSVG画像を埋め込み、altテキストを使用しましょう。

ロゴ画像からの検索を無視して良い場合は、SVGをインラインで直接埋込して良いと思います。

HTMLソース内のtitleやdescなどの要素テキストは「文字」として判定されるので、SEOの一助になると言えます。

この記事をシェアする

一押し人気コーナー紹介

SEOカテゴリの関連記事