無料SEO対策情報｜xHTML1.0のStyle属性でSEO対策

無料SEO対策検索エンジン最適化情報サイト「Style属性でSEO対策」

新規作成ホームページのSEO対策必須項目

SEO対策相互リンク募集　Link Directory

Submit Reciprocal Link Exchange Guide

世界中のYahoo! Free Emailのアカウント取得方法～メールソフト設定方法などをご紹介。41カ国地域のヤフー無料メールidを使いこなしませんか？

SEO/SEM対策を外部の会社に委託したい方や、新規製作、リニューアルをお考えの方、Flashだけ制作して欲しい、メールフォームだけ制作して欲しいなど様々なご要望を全国のホームページ制作会社様に一括でお見積り、提案等が無料でお問合せ頂けます。匿名性を保ちたい方でも大丈夫です。

KIT

Style="属性"を使った部分的なSEO対策の導入方法

このページでは、HTMLファイルの一部分で使用する部分的な「Style="属性"」を使ったSEO対策をご紹介します。
Styleの設定には大きく分けて３つあり、①外部にスタイルシートを作成して全体の体裁を整えるのに用いる「style.css」や、
②head要素の中に style要素を加えて<style type="text/css">によりページ単位でスタイルを整える方法が有りますが、
今回ご説明するのは、「インラインstyle属性」と呼ばれる「部分的なStyle="属性"の挿入方法」です。
インラインスタイル属性とは、xHTMLファイルの一部分に直接スタイル属性を指定して書き込む方法です。

ここでは、主に「xHTML 1.0」への適応を中心に書いていますが、他のバージョンにも応用可能な場合が有ります。
(※注意：xHTMLのバージョン1.1では、インラインスタイル属性についてW3C勧告により非推奨とされ、全て外部スタイルシートを用いる様に成っていますが、さらにその次の新バージョンでは使えるものも有ります。詳しくはネットで調べてご利用下さい。)
ブラウザーを選ばず( 画面が崩れない )、W3Cに準拠しているので検索エンジン大手3社に共通して使用可能な方法です。
検索大手3社とは、Yahoo! JAPAN, Google JAPAN, MSN Bing JAPAN, を指し、3社の検索シェアーは90%以上です。
SEO対策とは、「Search Engine Optimization」の略で、日本語では「検索エンジン最適化」を指します。

xHTML1.0に部分的なstyle属性を使用する場合の条件
ヘッダー情報の中に次のmeta情報を加えなければいけません。
<meta http-equiv="Content-Style-Type" content="text/css">

Next Href > CSS Color Code Chart 色見本一覧

インラインStyle="属性"のSEO対策効果とは？

インラインStyleのSEO対策効果１：検索エンジンを意識したxHTMLのコーディングが可能
検索エンジン最適化を研究しているWebmasterならご存知の方も多いと思いますが、検索エンジンの自動巡回ロボット「Robots Crawler」は、「.css」ファイルを参照しません。大手3社のロボット ( Googlebot, Yahoo!Slurp, MSNbot, ) は主にxHTMLファイルとサイト内のxHTMLファイルをもれなく巡回してデータ収集する為にsitemap.xmlのデータを収集しますが、
巡回参照ファイルの中に「.css」ファイルは含まれません。
つまり、外部参照スタイルシートに<strong>の赤色指定#ff0000を行い強調文字を視覚的にも強調しても、
それはブラウザー画面を見ている人間の目には赤く太く見えているだけで、xHTMLファイルを読み込む検索エンジンの自動巡回ロボットには普通に<strong>が挿入されている様に見えているだけです。

対して、xHTMLファイルにインラインスタイルを用いると検索エンジンが巡回データ収集する際に、書かれているコードの
「<strong style="color:#ff0000">強調文字を視覚的にも強調</strong>」を読み込み、strongで強調された上に、文字コードに赤が指定されて書かれている内容を収集して、重要なキーワードである事を認識できます。

インラインStyleのSEO対策効果２：ブラウザーがスタイルを適用する強さの順番
インラインスタイル > head要素内のstyle要素 > 外部スタイルシート
何故これを知る必要が有るかと言いますと、サイト全体のスタイルは外部スタイルシートに大まかに設定しておいて、
下層域のHTMLファイル単位で細かなスタイル設定を行いたい場合に、その全てを「style.css」に記載していると、
クラス化されたスタイルだらけに成ってしまいますので、それを回避する為にも知っておくと便利です。
また、Yahoo!とGoogleが採用している検索エンジンの検索結果表示順位を決めるアルゴリズムの幾つかの要素の中に、「Webの読み込み表示速度」と言うのが有りますが、サーバーのレスポンスが悪い場合には、スタイルシートとxHTMLファイルを２枚読み込むのに時間が掛かりすぎて上位表示の対象ページとは成らない場合が多々有ります。これを回避するためにも、head要素内のstyle要素を知っておくと１枚のxHTMLの読み込みだけで済みますので読み込み速度が上り検索順位が上る場合も。

インラインStyleのSEO対策効果３：文法的に間違いでは無い
Webmasterの中には、Another HTML-lint gatewayを用いて文法チェックを行っている方も少なくないと思います。
そして、インラインスタイル属性を用いてxHTMLに直書きしたファイルをチェックにかけると、注意喚起として「外部スタイルシートに記載しましょう」みたいなメッセージが表示されますが、xHTML1.0においてはW3Cが非推奨の対象としておらず、決して間違いでは有りません。
確かに、文法的には外部スタイルシートを利用するのが理想的で、xHTML1.1ではW3Cの勧告でインラインスタイルが非推奨となっている為使用できませんが、xHTML1.0は使用可能です。
ここで申し上げたいのは、「理想的な文法」と「現実のSEO対策」は別ものであり、文法を重視する余り検索順位が下がる可能性を否定できないと言う事です。

<strong>より強調<strong>のインラインStyleを使ったSEO的上手な使い方

strongの①背景色を指定して②文字色を強調色に指定して③左右に余白を設けた上で④四角で囲む
を実際にインライン属性を使って表現するとより強調と言う感じに成ります。コードは下記の通り
<strong style="background-color:#ffecff; color:#ff0000; margin:0 10px; padding:3px 3px 1px 3px; border-width:1px; border-color:#009900; border-style:solid;">より強調</strong>
コードは、<strong>だけでなく<em>強調でも同様の事ができるのでパターンを覚えると使いやすいです。

em強調の斜め文字の修正方法と文字着色
普通に強調を使うと<em>強調</em>この様に文字が斜めに成りますので、文字がつぶれて読みにくい場合が有ります。
斜めに成る文字を通常の状態に戻しながら文字に着色する場合のインラインスタイルの書き方です。
強調こんな感じにするには、<em style="font-style:normal; color:#0000ff">強調</em>と書きます。
さらにもっと強調したい場合いは、文字を太文字にもできます。
コードは、<em style="font-style:normal; color:#0000ff; font-weight:bold;">強調</em>と成ります。

SPANを用いて文字の位置決めや装飾を行うのであれば、STRONGやEMにインラインスタイルを用いた方がSEO対策に適した使い方が可能に成る場合も有ります。

リンクの下線を部分的に表示させたく無い場合のインラインスタイルの書き方

xHTMLファイルのヘッダー部分にある自サイトのロゴマークや<H1>タイトルに、自サイト・ドメインのURLをリンクする場合などは、リンクの下線を表示したくない場合が有ります。
また、当サイトの様にリンクをすると自動的にYahoo! JAPANこの様に下線が出る様に外部スタイルシートに設定してある場合が有りますが、インラインスタイルを使うと簡単に部分的に下線を表示させないことが出来ます。
例えば、Google JAPANこんな感じで･･･。コードの書き方は、以下の様にします。
<a href="http://www.google.co.jp/" style="text-decoration:none;">Google JAPAN</a>

文字サイズと行間を部分的に変更するインラインスタイルの書き方

<p style="line-height:200%; font-size:12px; color:#999900;">こうすることによって、１行目と２行目の行間が広がります。<br /> %の数字は文字サイズに応じて行間の広さが決まります。必要に応じてstyle属性にマージンやパディングも指定して使えます。</p>

こうすることによって、１行目と２行目の行間が広がります。
%の数字は文字サイズに応じて行間の広さが決まります。必要に応じてstyle属性にマージンやパディングも指定して使えます。

Div属性の要素を部分的に変えたい場合のインラインスタイル

私自身もdiv=idの属性や、div=classの外部スタイルシート属性が編集中のページレイアウトや挿入したい画像と合わない場合が有りますが、そういう場合に便利なインラインスタイル属性の使い方を紹介します。
divのインラインスタイル属性を覚えると、レイアウトの自由度が飛躍的に広がります。
上下をdiv=idに挟まれていても、div=classに挟まれていても、文法的に間違いでは有りませんので、
W3CのHTML Validation Tools(文法チェッカー)でチェックしてもエラーは出ません。

<div style="margin:10px 5px; padding:3px 3px 1px 3px; font-size:12px; line-height:150%; border-width:1px 2px 3px 1px; border-color:#cccccc; border-style:solid; width:400px; height:auto; text-align:center;">文章又は画像</div>

Example:インラインstyleを使ったdivは場所を選ばずエラーに成らない