文章を画像にしている場合のSEO対策はどう考えますか？

定期的に出る質問なのは承知していますが、お客様から聞かれてどう答えるべきか、どう対応を取るべきか皆さんの意見を聞きたく思います。

数年前に作成したあるサイトでデザイン重視のため（というかクライアントの強い要望により）、どうしてもこのフォントが良いと言う事で文字を画像にしてあります。
さすがに文字無しはまずいだろうという事でその時の担当と話してdivにdisplay:noneをして画像に入っている文章を文字化して入れてありました。
altでなくdivにdisplay:noneをしたのは文章量が結構あった為、その時に調べた限りではaltに長い文章を入れると認識されない様な意見が見受けられたためです。
マウスがホバーした際に長い文章がポップアップするのがみっともないという意見もありました。

最近になってどうやらそのクライアントに別の制作会社から営業電話みたいな物があり、
「知っててやってるかどうかは知らないがGoogle的には違法だ。うちで無料で修正するからやらせろ」
的な話だったという事です。

元々この対策自体、担当と話したとは言え、こちらとしても良い対策と思っていた訳でも無かったので、担当さんと話しクライアントと担当者でどうするか決めてくれればこちらは修正に従うという話だけしました。

個人的にはいわゆる「隠し文字」的なルール違反では無いもので画像に書かれている文章を入れてるだけだし、少なくともペナルティー的な物までは無いだろうと思ってましたが、少し心配になってきました。

この辺り微妙な話とは思いますが、ご意見をお聞かせ頂けたらと思います。

行動規範の内容に同意します

回答4件

ベストアンサー

Google のガイドライン

Google がガイドラインを出しているので参考までに。

下記は画像 - Search Console ヘルプからの引用です。

重要なテキストを画像に埋め込まない

重要なテキストを、リンクページの見出しやメニュー項目などの要素の画像に埋め込まないでください。ユーザーによっては、その要素にアクセスできないことがあるからです。重要なテキストベースのコンテンツにすべてのユーザーが確実にアクセスできるようにするには、通常の HTML 内に記述してください。

というわけで、重要なコンテンツを画像化する事は推奨されていないようです。

Google ウェブマスター向け公式ブログ

Google公式ブログによれば、text-indent: -9999px で文字列を飛ばす行為がガイドライン違反とあります。

CSS
1#navi li {
2  text-indent: -9999px;
3}
4
5#navi li#home {
6  background: url(./img/navi/home.gif) no-repeat;
7}
8
9#navi li#products {
10  background: url(./img/navi/products.gif) no-repeat;
11}

Google ウェブマスター向け公式ブログ: 隠しテキストは Google のウェブマスター向けガイドライン違反です

一昔前に流行った記憶がありますが、私もこの手法はよろしくないと読んだ覚えがあります。
対策として、text-indent: 100%; が生まれたようですが、やっている事は変わらないので、これもガイドライン違反なのでしょう。

私はこの手法の問題は、text-indent でテキストを画面領域外に飛ばす事で、「背景画像を前景であるかのように扱っている事」にあると考えています。
機械的に判断すれば、必要なはずのコンテンツ(テキスト)を領域外に飛ばし、無くても良いはずの背景画像を残す行為は明らかにおかしいのでスパム行為と判定されるのは自然だと思います。

テキストブラウザで確認する

text-indent の手法は「テキストブラウザ/音声ブラウザで閲覧した場合にCSSが無効化されるが故にテキストコンテンツとして表示される」という特徴があり、当初は良い手法であるとする意見がありました。
しかし、Google がそれを否定した事で「テキストブラウザで閲覧可能 === OK」の概念は覆りました。
Googleは隠しテキストと隠しリンク - Search Console ヘルプで次のように説明しており、テキストブラウザで確認する事は現在でも必要条件の一つですが、それが全てではありません。

サイトのアクセシビリティは、ブラウザで JavaScript、Flash、画像をオフにしたり、Lynx（リンク先は英語）などのテキストブラウザを使用したりすることで確認できます。

前景と背景

前述の前景/背景に関しては、それがコンテンツかどうかで決まります。
重要なコンテンツは前景(img要素)で現し、コンテンツでない画像(表示されなくても支障がない画像)は背景(background-image)で現します。
CSS3 には次の注記があります。

CSS Backgrounds and Borders Module Level 3 （日本語訳）

注記： CSS においては、 content プロパティにより，スタイル的な前景画像を提供し得る。（意味論的に重要な前景画像は、文書マークアップを通して提供されるべきである — 例えば HTML の img タグなど。）

SEO対策以前の前提として、HTML/CSSの仕様に準拠した書き方をする必要があります。

更新履歴

2017/07/20 0:22 「テキストブラウザで確認する」と「前景と背景」を追記

Re: landy77 さん

投稿2017/07/19 13:08

編集2017/07/19 15:24

think49

総合スコア18162

いちばんの理想形は、Web Fontで再現することです。それなら純粋に「文字」なので、SEO的に特殊なことを考えなくて済みます。

もっとも、フリーフォントならともかく、商用フォントをWeb Font化しようと思えば、そのためのライセンスが別途必要となります。

投稿2017/07/19 12:47

maisumakun

総合スコア145183

4.8.4.4 画像に対して代替として動作するテキストを提供に対する要件

考慮すべき事は、テキストブラウザや音声ブラウザで、その画像が示している内容が表示(再生)されるかどうかです。**Googleはなるべくユーザビリティーが高い物について評価するように努力し続けているため、Googleが現在どのように見ているかを考えても意味がありません。**標準に従って、多くの人が問題なく閲覧できるようにすることが第一です。

テキストブラウザや音声ブラウザでどうなるかを確認して下さい。もし、うまく表示(再生)できない場合、Googleに評価を下げられても文句は言えないと思います。

投稿2017/07/19 14:42