CSSのSEO 基本

CSS編!WEBデザイナーが覚えて損なしのSEOタグ

Pocket

こんにちは!太偲@WEB屋です。今日は先日に続きWEBデザイナー・コーダー・プログラマーの方が覚えて損しない基本 SEOにて、CSSで押さえておきたいPOINTをお送ります。

先日、WEBデザイナーが覚えて損なしシリーズの第一弾!という事で、headタグの基本的なSEO要素について以下記事にてご説明させて頂きました。

2回目はCSSのSEO基本編という事で、Googleが推奨しているソースコードの書き方やCSS(スタイルシート)におけるSEO対策の基本となる注意事項について、お伝えしたいと思います。

CSSやjavascriptはGooglebotが見える様にしよう!

CSS(スタイルシート)の話の前に、まずはCSSやjavascriptがGoogleから見える様になっているかのチェックが必要です。

robots.txtというファイルについて、ご存知の方も居ると思いますが、こちらに記述する際、Googleのクローラー(googlebot)からCSSやjavascriptをブロックしてしまうと、クローラーがサイトの内容(ソースやプロパティ)を正しく判別する事ができない場合があるので、注意が必要です!

例えば以下の様な形でrobots.txtに記述がある場合は修正・削除しましょう。

User-Agent: *
Disallow: /js/
Disallow: /css/
Sitemap: http://www.hoge.com/sitemap.xml

因みにGoogleもrobots.txtをちゃんと設置しています。

■Googleのrobots.txt↓
https://www.google.co.jp/robots.txt

また、CSSの読み込み等に時間がかかってしまっていないかも確認しましょう。

ChromeのDeveloper Tools > Networkの項目でも簡単にチェックできますね!

chrome developer network

警告メールがGoogleから送信される事もあった

以前に、GoogleもCSSとjavascriptをクロール出来る様にしなさいという警告文を一斉送信していた例もあります。

CSSとJavaScriptのファイルへのアクセスをrobots.txtでブロックしているサイトに対して、Search Console経由で警告メッセージをGoogleは一斉に送信し始めました。

上記の記事にもある様に、2015年の7月あたりにGoogleからウェブマスターへ警告メール(サーチコンソールのメッセージ)が届いていました。

ブロックしていると検索順位に影響は出るのか?

クローラーをブロックする事によって、googlebotがコンテンツをしっかりと表示確認する事が不可能になってしまいます。

それが原因となり、サイト自体をちゃんと評価しきれない理由となってしまう可能性があります。

順位が下がるというよりかは、本来はもっと評価を受けられたかもしれないのに、その機会を逃してしまっている可能性が出てくるといったところでしょう。

それでは、本題へ移りましょう!

Googleが推奨するCSSファイルの書き方を紹介

一応Google公式ドキュメントにて、HTMLとCSSファイルの記述に関するものが出ています。

グーグルのCSSガイド

今回は、CSSの部分だけにスポットを当ててみてみたいと思います。

/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}
/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

URLのパスについて、Googleはhttpやhttpsのプロトコルを省略して書くべし!となっています。これやってる方少ない気がします・・・。そして、headタグ内のURL記述についても同様の書き方を推奨しています。

あと、0.8などの数字をプロパティ名後に記述する際、「.8」という形で0(ゼロ)を含めない記述を推奨しています。

続いて「インデント」の方法についてですが、これは皆さんご存知の方も多いと思いますが、半角スペースで入力する事をGoogleは推奨しています。

タブ(Tab)で入れる際のエディタ設定等で半角スペース2つ分等に設定しておけば問題ないと思います。

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}

上記は、セレクタ内にある単語や省略語をハイフン以外で繋げるなという内容です。アンダーバー使っている方多いと思います。

あとは、プロパティ:(コロン)の後には半角スペースを入れるという事と、プロパティ名の並び順はアルファベット順に並べる様にしましょう。という部分くらい押さえておければ良いと思います。

全体を通して、Googleはスタイルシートの読み込み時にもなるべく簡素化されてシンプルなソースコードを望んでいる事は確かなので、複雑になるほど推奨される様なCSSではなくなるという事です。

メンテナンス面も考慮した上で、実装できるものは取り組んでいくのが良いかと思います。

CSSで注意が必要なSEO項目リスト

ある程度、WEB制作に関わっている方であれば、聞いた事のある内容も多いと思います。

SEO対策も考慮されたもので、やってはいけない・Googleに優しくない(?)SEOのCSSスパムになりやすい物としては、以下にあてはまるような事柄があります。※たくさんありますが、今回は近年の事情絡めピックアップしています。

何となくわかってはいるものの、どうしてダメなのか?どういう事がそれに値するのか?までは理解するのが難しいかと思います。

それでは、上記項目について一つずつ説明していきましょう。

クローキングに値するもの

SEOのNG系項目で検索をした事のある方であれば、クローキングという言葉を聞いた事があると思います。

クローキングとは具体的にどの様な事を言うのでしょうか?

検索エンジンに見せる内容とユーザーが見える内容が異なる事。つまりクローラーに対してはSEO目的のページ(テキストだらけのページ等)を見せて、ユーザーに対してはテキスト等の無いデザイン性の高いページを見せる等といった方法です。

クローキングに近いかな?と思ったら

普段、デザイナーの方がこの手法を使ってしまうという事はあまりないかと思うのですが、主に.htaccessの設定やscriptでUA判別(ユーザーエージェント切り替え)にてCSSの切り替えを行ったり、クローラー用やある一定のユーザーのみに向けた別コンテンツを表示させた場合に起こりえる問題です。

WEBサイト内にて特定のターゲットへ制限をかけ、尚且つ同一URLで切り替えた見せ方(特に内容が大きく異なる場合)をする際は、そのページをrobots.txtでブロックするかheadタグ内のmeta noindexを使って見なくて良いという記述をしておくのが良いでしょう。

小さすぎるフォントサイズの多様

モバイルフレンドリーにも言える事ですが、小さいフォントに関してはユーザビリティをも損ねてしまいます。

小さいといっても具体的にはどれくらいを基準に考えたら良いのか?というところになってくると思いますが、以下を基準程度で考えていれば問題ないかと思います。

フォントが小さすぎるかな?と思ったら

まずは、ブラウザ毎のデフォルト最小値について確認していきましょう。

Chrome 10px
Safari 9px
Firefox 無し

最小値は設定変更が可能ですが、このpixelサイズで見ても小さいと感じるはずですね。

それが「小さいフォントサイズ」と皆さんが認識するものであるように、可読性が下がる様な状態であればあまり良くない状態です。

SEOに限った話ではないですね。

その他、CSS3の「transform」にて、scaleを使って縮小させるのもオススメしません。表現的には面白い手法だと思いますが。。。

小さいフォントはどれくらい使っても良いのか?

多様と表現していますがどの程度か?という事ですね。読む事が必要とされる個所では、小さいフォントは全て避けるべきだと思います。

最近だとフォントでかっこよく見せる為に、英文で小さな文字を入れているサイトを良く見かけます。飾り程度に少し入れている位なら問題ないかと思います。

但し、キーワードに重要に関わってくる部分での小さいフォント多様は注意した方が良いでしょう。カッコイイ感じに仕上がっていても、正しい評価を受ける事が出来なくなってしまう可能性があります。

あとは、スマホ対応でもモバイルフレンドリーテストには最低限合格できる様にしておきましょう。

■モバイルフレンドリーテスト↓
https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

※上記で使った場合は1ページずつしか確認できないので、Search Consolの「モバイル ユーザビリティ」で確認する事をオススメします。

searchconsol_mobileuservility

リンクボタン同士(タップ要素)等において近すぎる場合ですが、こちらに関してもモバイルフレンドリーで引っかかってしまう項目となっています。

近年スマホアプリのガイドラインについても、ボタンのサイズ等である程度の基準が設けられているのでそれに最低限沿った形で実装するのが好ましいでしょう。

リンク・ボタンが小さいかな?と思ったら

少し古い内容ですが、以下の記事にて参考になるような事が記載されています。

Microsoftのサイトによれば7ミリでのタップ操作によるミスは100回に1回、これが9ミリなら200回に1回、そして5ミリだと30回に1回とされています。ゆえに「7ミリ」であれば概ね問題なく、より慎重な操作が必要なボタンには「9ミリ」を推奨しています。またボタン間のスペースは「2ミリ」以上を推奨しています。

現在は、更にユーザーのアプリに対するリテラシーも上がっているので、この限りではないと思いますが実際に操作感等しっかりと確かめた上で、注意しておきたいポイントですね。

背景に同化してしまうテキスト

こちらに関しては、言わずとも知れた有名なCSSスパム(隠しテキスト・隠しリンク)手法の一つです。

今回取り上げさせて頂いたのは、背景画像の上に乗るテキストについて質問される事があったので、そのポイントについて記載しておきたいと思います。

具体的には、背景画像(background-imageやposition配置問わず)の上にテキスト要素が乗る場合、写真や画像の内容によってはテキストが見えにくくなる場合もダメなのか?という事です。

GoogleはWEBサイト上の画像の配色まで認識しているのか?

Googleの画像認識力は最近ではかなり精度が高いところまで来ています。特に文字に関しては数年前からある程度正確に認識できるようになっていて、WEBサイト内にある画像ファイルを中に書いている文を認識して登録している事例もたくさんあります。

ただ画像の色に関しては、CSSで配色されている訳でもないので画像検索等で見た感じでも、正確性は微妙な場合があります。

ちょっとこちらも古い記事ですが、パシさんのブログで僕が思っていた事と同様の内容が書かれていました。

Googleがどのように色を判定しているのかは分かりませんが、背景として読み込ませる画像によって、人間には問題ないと感じる色の組み合わせでもGoogle的には隠しテキストと判定してしまうことがあるのかも知れません。

こちらの内容は、画像認識をした上でGooglebotが自動的に隠しテキストと判定してしまう可能性もあるかも?という事や、CSSを見ているのであれば背景色が白になっていて黒い画像に白いテキストを配置してGoogleが黒画像を白と思っていたら?という点に触れています。

背景画像の上にテキストを乗せる場合のSEO対策は?

ノーリスクで考えるのであれば(特に前述にあたる内容で、テキスト量が多い場合)、CSSの背景色に同化してしまうフォントカラーの指定は避けるべきなのかなと思います。

それか、ごまかしになってしまうかもしれませんがsectionやdivのブロックで画像エリアを囲った場所に、画像の色に近いbackground-colorを指定し、そこに通常背景色と同化しそうなcolor指定をするといったところでしょう。

普通のWEBサイトであれば、この項目について大きな問題を抱える事は少ないかと思いますし、SEO担当者に指摘されるパターンも少ないかと思います。

ただし、極端にSEOのリスクを避けなければならないと言われたら、僕だったら前述の様な形にします。

タブ切り替えで隠れた重要な部分

URLが推移せずに、タブで切り替える要素やアコーディオン開閉式の要素を使用しているサイト、結構多いですよね。

この要素に関しては、SEOにおける重要な問題があります。以下海外SEOブログの鈴木さんが記事にされています。

展開ボタンやタブのデザインで初期状態では隠れているコンテンツを、Googleは、インデックスしてはいるけれど検索の対象にはしていないように思えます。

そうなんです。タブでデフォルトで隠れていたりするコンテンツのテキストにおいては、Googleは検索結果の反映指標として対象にしておらず、公式でも発表しているのです。

display:noneも含めタブで隠れているコンテンツのテキストをコピペして検索しても、対象にされていないので検索結果で出てこないらしいです。

site:(コロン)で検索しテキストを含めると、そこには出てくるそうなのでインデックスはしているけど、検索結果の指標として使っていないというのは理解できますね。

また、理由として上がっている「ユーザーを戸惑わせる」という部分も納得できます。検索したテキストがそのページのどこにあるのか、すぐに判断できないですものね。

重要な部分がタブに含まれている?と思ったら

ボリュームの大きな要素の場合は、タブ表示としないか別ページで実装するのが良いでしょう。

アコーディオンで実装されているQ&A要素等に多いかと思いますが、カテゴリ別としたブロックごとに見出しと説明テキストを入れる等の対応をするのが良いと思います。

jqueryやCSSで当然の様に使っているWEBサイトの機能ですが、SEOの落とし穴にもなる事があります。

ここも覚えておいた方が良いポイントの一つです。

CSS(スタイルシート)のSEO対策のまとめ

CSS SEO基本のまとめ

長文になってしまいましたが、CSSにおけるSEOの注意点や対策方法について僕なりの考え方等をまとめてみました。

スタイルシートに書いたソースコードの記述は、Googleが理解している事とモバイルフレンドリーにおけるスマホサイトのあり方や、Jqueryで簡単に実装できるからと言っても注意しなければならない部分があるという事、覚えて頂ければと思います。

WEBデザイナーの方が、昨今ではphpやjavascript等も当たり前の様に実装するようになってきているので、以前はプログラマーの方が対応していた修正点においても、デザイナーがやらなければならない範囲になってきているでしょう。

SEO対策においてもいえる事ですが、WEBデザイナーやWEBプログラマーの方が基本的な考え方を理解して頂ける事で、SEOやマーケティング関係者との距離を縮めて行く事ができるのかな?と思っています。

そして、そこに僕は少なからず貢献するための情報発信をしていこうと思いつつ、今年も頑張らせて頂きます。

不定期更新ですが(一応週1更新目指しているんですが。。)、よろしくお願いします!!

まだ読まれていない方はお時間ある際に、以下記事も暇つぶしでご覧下さい!

もちろんSEO担当者もCSSの基礎は必要です!

僕も、SEOやWEBマーケティングに突っ走ってばかりではなく、WEB制作の知識も少し入れておくようにしています。

まだまだ足りませんが。。。特にCSS3とHTML5は。。。

今年は、自分でサイト制作も適度に再開しつつ頑張って行きます!

いちばんやさしい新しいSEOの教本 人気講師が教える検索に強いサイトの作り方

最後まで読んで頂きありがとうございます。

当サイトでは、訪問して頂いた皆様へWEBアンケートのご協力をお願いしています。

また、すこ~しだけでも参考になりましたら、いいねやブックマークして頂くと個人的に喜びます。

Pocket

Comments