Art and Web link navi

Search

SEO診断

webstudio WhitePallet

WhitePallet's SNS


SEOを意識したHTMLの書き方

優先度AXHTML+CSSでの記述

現在、HTML4.01よりも、XHTMLの方がSEOに効果があると言われています。
XHTMLは、WEB標準に準拠しているため検索エンジンから好まれる傾向にあります。
また、HTMLで使用できた表示をコントロールするいくつかのタグが使用できませんが、W3Cのルールでは、「表示のコントロールは外部化したスタイルシートで行うべき」としています。

優先度A正しい文法での記述

W3Cの勧告に準拠していないHTMLソースは、検索エンジンから正確にクロールされない可能性があります。
下記のようなHTMLソースの文法チェックツールを利用して、正しい文法で記述されているかの確認が必要です。

優先度Ahead内の記述内容

<head>〜</head>の中に記載する内容も、SEOにとってはとても重要です。
必要な情報が記述されているか、不要な情報・誤った情報が記述されていないかを確認しましょう。

下記はXHTML1.0で記載したheadのサンプルです。

  1. <?xml version="1.0" encoding="Shift_JIS"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
  6. <meta http-equiv="content-style-type" content="text/css" />
  7. <meta http-equiv="content-script-type" content="text/javascript" />
  8. <title>タイトル</title>
  9. <meta name="keywords" content="キーワード" />
  10. <meta name="description" content="説明文" />
  11. <meta name="robots" content="index,follow" />
  12. <meta name="robots" content="noodp" />
  13. <meta name="robots" content="noydir" />
  14. <link rel="stylesheet" type="text/css" href="cssファイルのパス" />
  15. <script type="text/javascript" src="javascriptファイルのパス"></script>
  16. </head>
1行目 XML宣言を記述します。
2行目 DOCTYPE宣言を記述します。ここで宣言したDOCTYPEの文法に従って(X)HTMLを記述します。
3行目 <html>にはlang属性を設定します。この言語設定がないと、ブラウザが正確に認識しない場合があります。
4行目  
5行目 文字セットを記述します。これはブラウザに(X)HTMLがどの文字コードで記載されているかを教えるためのもので、記載しない場合、文字化けが起こる心配があります。
6行目 CSSを利用する場合に記述します。
7行目 JavaScriptを利用する場合に記述します。
8行目 タイトルを記述します。
9行目 キーワードの記述をします。
10行目 ページの説明文を記述します。
11行目 検索エンジンの久ローラやロボットの巡回を促すための記述します。
12行目 Dmoz対策用の記述をします。
13行目 Yahoo!ディレクトリ対策用の記述をします。
14行目 CSSを使用する場合は、head内に記述するのではなく外部ファイルで設定し読み込みます。
15行目 JavaScriptを使用する場合は、head内に記述するのではなく外部ファイルで設定し読み込みます。
16行目  

優先度Abody内JavaScriptのインクルード禁止

表示内容を、JavaScriptのdocument.write()によるインクルードで行わないようにしましょう。
検索エンジンのクローラーにとって、JavaScriptによる記述は認識できない場合があります。

優先度Amap・flash・JavaScriptリンクの不使用

map・flash・JavaScriptリンクの使用は行わないようにしましょう。
クローラーがたどれないため、検索エンジンへのインデックスに問題が生じます。

優先度BJavaScript、CSSファイルを外部ファイル化

クローラーがhtmlを読み取りやすくするために、レイアウト・デザインに対する JavaScript/CSS 記述は、外部ファイル化しましょう。

優先度Bhxタグによる見出しマークアップ

見出し要素を論理的にマークアップするために、 見出しタグ<h1>、<h2>・・・<h6>を使用します。
<h1>はページそのものを表すタイトルとほぼ同内容のもの、以降は中見出し、小見出しと数字の順につづきます。
検索エンジンにおいて、見出しタグは効果的です。キーワードを見出しタグの中に適切に盛り込んでください

優先度ACpタグによるテキスト・画像マークアップ

段落を表す<p>タグを使って、文章内容をすべてマークアップしてください。
画像に対しても<p>タグでマークアップすることで、若干効果が強まります。

優先度Cstrong、emタグによる強調

<b>タグではなく<strong>、<em>タグを用い、強調要素にも論理タグを使用します。 これらの強調要素は多用せず、基本的にページ内で同一の文言（キーワード）に使用してください。 ※強調度合いは、<strong>の方が<em>より強いです。

優先度Cul、olタグによるリスト構造

箇条書きにあたる要素（メニューなどサイトナビゲーションを含む）は、リストタグでマークアップします。
要旨が並べられることが多いため、検索エンジンから重視される傾向にあります。

おすすめ無料ブログ
■FC2「FC2ブログ http://blog.fc2.com/」

無料レンタルサービスFC2運営のFC2ブログ

  • PC,携帯(モブログ)両対応。
  • 記事：トラックバック,コメント投稿,画像投稿,タグ可
  • 編集：プロフィール紹介,カテゴリー,リンク,カレンダー機能,サムネイル設定
  • デザイン：多彩なテンプレート,html編集,スタイルシート編集,ブロック変数
  • 紹介：新着ブログ記事,新着モブログ,新着ブログ,ブログカテゴリー,アクセスランキング
  • その他：blog内検索,商用利用可,ブログパーツなど
■はてな「はてなダイアリー はてな」

人力検索エンジンはてな提供のブログ機能のついた無料日記サービス。はてなダイアリー

  • PC,携帯両対応
  • 記事：トラックバック,レス機能,自動リンク機能,画像投稿可,一部タグ可
  • 編集：モジュール(プロフ,写真,検索,カレンダー,最新ブログ情報,アンテナ,注目URLなど)
  • デザイン：テンプレート(tDiaryテンプレ対応),ヘッダ・フッタ・CSS設定可
  • 紹介：キーワード,はてなダイアリーアンテナなどのカテゴリー分類、キーワード検索
  • その他：ブログインポート・ダウンロード対応,有料オプション(ヘッダ非表示,自動リンク拒否等)有り

■Ameba「アメーバブログ」
アメーバ・ブログは初心者向けのブログです。ブログ以外のサービスも充実しています。
独自のデザインでブログをとことんカスタマイズしたい猛者には適さないかも？

■livedoor「livedoor Blog」
トップページ、個別記事、カテゴリ、月別テンプレートのHTMLを個別に編集することができカスタマイズ性に優れたブログです。


ブログカスタマイズ

■ ブログカスタマイズのことならwebstudio WhitePallet


無料SEO対策オンラインツール

■高機能キーワードアドバイスツール「FerretPLUS（フェレットプラス）」


有料SEO対策

■「Yahoo!ビジネスエクスプレスYahoo!ビジネスエクスプレス」

■ディレクトリ登録審査サービス「クロスレコメンドクロスレコメンド」

▲ページの先頭



Copyright © White Pallet All rights reserved.