ＳＥＯ効果があるタグの正しい使い方

http://hukugyouseikatu.com

ＳＥＯ効果があるタグの正しい使い方

　　　　　　　　　　　　文字強調ﾀｸﾞ　　　見出しﾀｸﾞ　　　　ﾘﾝｸﾀｸﾞ　　　　　ﾘｽﾄ作成ﾀｸﾞ

　ＳＥＯ効果がある文字強調タグ　＜ｓｔｒｏｎｇ＞タグ、＜ｅｍ＞タグ

　＜ｓｔｒｏｎｇ＞タグは文字を太く、＜ｅｍ＞タグは文字を斜めに強調するタグです。

＜ｓｔｒｏｎｇ＞タグと同じ機能の＜ｂ＞タグとの違いは、＜ｓｔｒｏｎｇ＞タグは論理的要素として重要な言葉を太字で表現する場合に使われますが、＜ｂ＞タグは視覚的に文字を太くするだけですので、検索結果で上位に表示させたい場合は、＜ｓｔｒｏｎｇ＞タグを使いましょう。

上記の＜ｓｔｒｏｎｇ＞タグと同様に＜ｅｍ＞タグと同じ機能の＜ｉ＞タグとの違いは、＜ｅｍ＞タグは論理的要素として重要な言葉を表現する場合に使用しますが、＜ｉ＞タグは視覚的に文字を斜体にするだけです。検索結果で上位に表示させたい場合は、＜ｅｍ＞タグを使いましょう。

　ＳＥＯ効果がある見出しタグ　＜ｈ１＞～＜ｈ６＞タグ

　＜ｈ１＞～＜ｈ６＞タグは見出しを設定するタグです。「ｈ」の後の数字は見出しのレベルを示し、数字が小さいほど重要度があります。そこで、「ｈ」タグの構造を図にまとめてみました。
右の図１は、ｈタグの階層構造をあらわしています。これを木に例えると＜ｈ１＞タグが幹（大見出し）、＜ｈ２＞タグが枝（中見出し）、＜ｈ３＞タグが小枝（小見出し）・・・＜ｈ６＞タグが最後の葉というようになります。＜ｈ７＞以降はありません。
　また、ＨＴＭＬ文書で必ず一番最初に出さなくてはならない見出しタグは＜ｈ１＞タグで、＜ｈ２＞タグから始まるようにしてはいけません。何度も＜ｈ１＞タグを使ってはいけません。
　ＳＥＯ対策から見ても「ｈ」タグは＜ｔｉｔｉｌｅ＞タグの次に重要視されます。ロボット型検索エンジンは「ｈ」タグの中で＜ｈ１＞タグを最重要視し、順に＜ｈ２＞、＜ｈ３＞・・・とランク付けします。

　ＳＥＯ対策を考えてＨＴＭＬ文章の中で「ｈ」タグを最大限に発揮できる方法は・・・

できるだけ＜ｂｏｄｙ＞タグの直後に＜ｈ１＞タグを配置する。
＜ｔｉｔｌｅ＞タグで記入した内容とページの中のキーワードを含めて「ｈ」タグに記入する
＜ｔｉｔｌｅ＞タグと同様に重要なキーワードを先頭から順番に記入する。

　上記の内容を踏まえて見出しを作成すれば、ＳＥＯ的にも１ランクアップ間違い無し！。

　リンクを司るタグ　＜ａ＞タグ

　＜ａ＞タグはリンクに関係するタグです。ホームページ作成ソフトを使用すれば簡単にリンクを作成できますが、できればＨＴＭＬの中身を理解しておきましょう。

テキストリンクの基本例
　　　　　_{┌－リンク先のURL－－－－－－－－┐┌ﾀｰｹﾞｯﾄｳｨﾝﾄﾞｳの指定┐┌表示したいテキスト┐}
<a href="http://hukugyouseikatu.com" target="_blank">副業すべし、内職</a>

バナーリンクの基本例
　　　　　_{┌－リンク先のURL－－－－－－－－┐┌ﾀｰｹﾞｯﾄｳｨﾝﾄﾞｳの指定┐┌表示したい画像ファイルアドレス┐}
<a href="http://hukugyouseikatu.com" target="_blank"><IMG src="/img/banner.gif" border="0"></a>
^{└枠線の指定┘}

　上記が＜a＞タグを使った基本的なリンクの方法です。
ターゲットウィンドウの指定が無ければ同じウィンドウで開き、以下の指定の場合はそれぞれの方法でウィンドウが開きます。
target="_blank"←別のウィンドウで開きます。
target="_top"　←フレーム内のリンクから同じウィンドウに表示させるときに使います。（トップページの更新情報など）

枠線の指定（border=""）を１にすると

になります。これでは画像の周りに枠が表示されてしまい、かっこ悪いので普通は０にしておきます。リンクを設定しない画像だけの場合は、
<IMG src="/img/banner.gif" border="0">で、

になります。
^{└－－－－－－－－┴^{表示したい画像ファイルアドレス}}
ＩＭＧ要素のａｌｔ属性について
　上記で画像のことに触れたので、ａｌｔ属性について解説します。
もし、画像やバナーが正常に表示されなかった場合、その代わりにテキストを表示させると訪問者に何の画像だったのかがわかりますよね。そこでａｌｔ属性を使います。

<IMG src="/img/panner.gif" alt="副業すべし、内職在宅ワークで余裕生活">
^{ａｌｔ属性┴－┘└－代替テキスト文－－－－－－－－－－－－－－┘}すると

こうなります。
画像が正常に表示されると、

になり、バナーの場合は

になり、マウスを重ねると代替テキストが表示されます。

　ａｌｔ属性は絶対に必要と言うわけではありません。しかしロボット型検索エンジンは画像の内容までは理解できないので、ａｌｔ属性を付けることによって理解することができます。また、ａｌｔ属性があれば無いものよりＳＥＯ効果があると言われていますので出来るだけ付けるようにしたほうが良いでしょう。訪問者にも優しいし、クリックしてみたくなる効果もあります。

同じページの指定部分にジャンプリンクさせる例

_{┌－－－－┬表示させるテキストや画像アドレス}　　　　　
<a href="#naisyoku">▲内職へ</a>
^{└－－－－－┴ ＜ａ
ｎａｍｅ="で指定したものと同じキーワード}
_{┌－－－┬アンカー名を指定する属性}
<a name="naisyoku">
^{└－－－－┴アンカーを指定する任意のキーワード}
_{┌－－－－－－－┬戻り先を設定する内容}
<h1>内職</h1></a>
　　　　　：
　　　　中略

①と②の順番は逆になっても正しくリンクされます。

他のページの指定部分にジャンプリンクさせる例
hukugyou.htmlの中からzaitaku.htmlの内職の見出しにジャンプ。
　■ファイル名「hukugyou.html」内

_{表示させるテキストや画像アドレス┬}_{－－－－┐}
<a href="zaitaku.html#naisyoku">▲内職へ</a>
^{└┬－－－－－－－－－－－┘

^{ｚａｉｔａｋｕ．ｈｔｍｌ内の}}^{^{＜ａ
ｎａｍｅ="で指定したものと同じキーワード}}
　■ファイル名「zaitaku.html」内
_{┌－－－┬アンカー名を指定する属性}
<a name="naisyoku">
^{└－－－－┴アンカーを指定する任意のキーワード}
_{┌－－－－－－－┬戻り先を設定する内容}
<h1>内職</h1></a>
　　　　　：
　　　　中略

①と②の順番は逆になっても正しくリンクされます。

　
━①

━┓
　 ┃②
┃
━┛

　
━①

━┓
　 ┃
②┃
━┛

　ブラウザ上では「▲内職へ」をクリックすると、②の<a></a>に挟まれた、「戻り先を指定する内容」が一番上に表示されます。
　ページが長くなった場合は、トップに戻れるようなテキストや画像をこのような方法で設定したほうが訪問者に優しいと言えるでしょう

上記と異なる所は、他のページを指定するためのＵＲＬ（赤で示した部分）が入ることです。それ以外は変わりません。

　リストの見栄えがよくなるタグ　＜ｏｌ＞、＜ｕｌ＞タグなど

　文章を箇条書きにしたい時、

１．内職内職内職・・・・内職内職内職・・・・	これでは番号の下に文字が回りこんでしまい、かっこ悪いですよね。こういう場合は・・・
内職内職内職・・・内職内職内職・・・・	このようにしたほうが見やすく解りやすいですよね。また、番号だけではなくて記号や文字に設定することもできます。ここではこのようにリストの見栄えをよくする方法について解説します。

先頭が番号の場合	先頭が記号の場合	先頭が文字の場合
<ol><li>内職・・・　　 <li>副業・・・　　 <li>副収入・・・</li> </ol> 　　　　　　　　　↓	<ul><li>内職・・・　　 <li>副業・・・　　 <li>副収入・・・</li> </ul> 　　　　　　　　　↓	<dl><dt>内職　　 <dd>内職・・・　　 <dt>副業　　 <dd>副業・・・　　 <dt>副収入　　 <dd>副収入・・・ </dl> 　　　　　　　　　↓
内職内職・・・内職内職・・・副業副業・・・副業副業・・・副収入副収入・・・副収入副収入・・・	内職内職・・・内職内職・・・副業副業・・・副業副業・・・副収入副収入・・・副収入副収入・・・	内職内職内職・・・内職内職・・・副業副業副業・・・副業副業・・・副収入副収入副収入・・・副収入副収入・・・
この番号タイプと黒丸タイプはよく使用します。順を追って説明したいときは番号で、順不同の場合は黒丸に使い分けましょう。	赤い部分を変更すると、 <ul type="circle"> これで白丸に、 <ul type="square"> これで四角になります。	キーワードについて説明したいときに使用します。また、番号では物足りない時に、手順１、手順２のようにも使えます。使用例はこちら

back HTMLの構造とSEO対策 next ﾗﾝﾃﾞｨﾝｸﾞﾍﾟｰｼﾞ最適化

ＳＥＯ効果があるタグの正しい使い方

ＳＥＯ効果がある文字強調タグ ＜ｓｔｒｏｎｇ＞タグ、＜ｅｍ＞タグ

ＳＥＯ効果がある見出しタグ ＜ｈ１＞～＜ｈ６＞タグ

リンクを司るタグ ＜ａ＞タグ

リストの見栄えがよくなるタグ ＜ｏｌ＞、＜ｕｌ＞タグなど

　ＳＥＯ効果がある文字強調タグ　＜ｓｔｒｏｎｇ＞タグ、＜ｅｍ＞タグ

　ＳＥＯ効果がある見出しタグ　＜ｈ１＞～＜ｈ６＞タグ

　リンクを司るタグ　＜ａ＞タグ

　リストの見栄えがよくなるタグ　＜ｏｌ＞、＜ｕｌ＞タグなど