ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > サーチエンジンと相性の良いウェブデザイン − CSSを活用する3つの方法

サーチエンジンと相性の良いウェブデザイン − CSSを活用する3つの方法

投稿日:2011年1月21日   レベル:−    ソフトウェア:−

サーチエンジンと相性の良いウェブデザイン

このチュートリアルでは、サーチエンジンと相性の良いウェブデザインをご紹介します。

ウェブデザインテクニック1:はじめに

この記事ではCSSを使ってウェブデザインを改良し、GoogleやYahoo!などの主要なサーチエンジンでより良い結果が得られるようにするための簡単でとても効果的な3つの方法を紹介します。

まず最初に、CSSとは何でしょうか?
CSSはカスケーディング・スタイル・シートの略で、ウェブデザインにおいて、表示のためのコードと実際のサイトの内容を分けるための手段です。
通常はCSSのスタイルの定義を作成し、.CSSの拡張子を付けて、別ファイルとして保存します。
そしてHTMLのリンクタグを使って、そのCSSファイルをウェブページと関連付けます。

表示のためのコードをCSSファイルとして別にすることには、とてもたくさんのメリットがあります。
この記事ではCSSを使ってウェブデザインをサーチエンジンとより相性の良いものにする3つの効果的な方法を紹介します。



ウェブデザインテクニック2:CSSを使ってドキュメントの構造を作成する

サーチエンジンに関してわかっていることを考えてみましょう。
サーチエンジンはロボットがサイトを巡回してサイトの内容を読み取ります。
その際にロボットが見つけやすければ見つけやすいほど良いです。
というのは、ロボットはサイトを探すのにそれほど時間をかけないからです。
つまり、表示のためのマークアップをわざわざページ内にたくさん書いて、ページを煩雑なものにすることに意味はありません。
表示のためのマークアップはCSSにわければ良いのです。

多くの場合、不要なテーブルタグを取り除いて代わりにHTMLの少数のdivタグを使ってCSSで表示を制御することで、スマートなHTMLを実現できます。
サーチエンジンが簡単に見つけてインデックスを付けられるような、きちんと整ったページとなります。



ウェブデザインテクニック3:CSSを使ってヘッダータグを定義する

ウェブページ上にあるh1、h2、h3といったヘッダータグをサーチエンジンがかなり重要視していることも分かっています。
不慣れなウェブデザイナーがヘッダータグを使用しない理由は、モダンブラウザのデフォルト設定ではこれらのタグは大きな黒のテキストで表示され、
とても見た目が悪いからです。ここでCSSが役に立ちます。
CSSを使えば、ヘッダータグの内容を魅力的なテキストとして表示するように定義でき、サーチエンジンの評価も高くなり、同時にユーザーの目も楽しませることができます。
完璧ではないですか?





ウェブデザインテクニック4:CSSを使ってロールオーバー画像を作成する
このjavaスクリプトのコードは、ウェブページのボリュームを膨張させる上に、サーチエンジンにとってはjavaスクリプトのコードはページの内容ではなく意味をなさないものであるため、javaスクリプトがたくさん書かれているページはランキング(SEO)に不利になる可能性があります。
ロールオーバー画像を実現するのにより良い方法はCSSを使用することです。
この場合も2つの画像を必要としますが、通常のテキストリンク(ターゲットとするキーワードを含むアンカーテキスト)を作成して、CSSを使って表示をコントロールします。
そのリンクをHTML内のブロック要素として高さと幅を設定し、画像1はリンクがオフ状態の時用で、画像2はユーザーがリンクの上にカーソルを重ねた時用として、2つの別の背景画像を定義します。



ウェブデザインテクニック5:結論

カスケーディング・スタイル・シート(CSS)はサイトの内容と表示のためのコードを分けるとても効果的な方法です。
CSSがウェブデザインにもたらすサーチエンジン最適化(SEO)の利益は否定できません。
今日からのウェブサイト制作に、CSSのウェブデザインテクニックを使用してみませんか?



引用:Web Design Library 著者:Stuart Mortimer 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング