正しい相互リンク集作成方法：xhtml/cssコーディング編

このページは、「正しい相互リンク集作成方法基本編」からの続きです。
Page Title の名前の付け方や、<meta name="Description" content="説明文"の書き方、相互リンク集の「質」「内容」「数」など理解していないといけない大切な箇所を未だ読まれて無い方は、是非ご一読下さい。
また、関連項目として、誤った相互リンクによる被害を未然に防ぐ見破り方
間違いSEO相互リンク編や、相互リンクSPAMや悪意の記事書き込みリンクを仕掛けてくるサイトをYahoo!やGoogle検索エンジンに登録通知する方法、
悪意のLink拒否の方法もあわせてお読み頂くと参考に成ります。

当サイトのリンク集も最初は全くダメでした。ページランクも黒く塗りつぶされたままでGoogle Page Rankすら付かないリンクページでした。そこで他の相互リンク集を見ながら試しに工夫した方法が、いきなりリンク集を作成しないで、最初の出だしに関連項目のKeyword入り文章を入れると効果が出た事です。参照趣味･スポーツ･エンタ
本文タイトルの最初の書き出し<h2>書き出しタイトル</h2>の直下に、
<div><p>文章の中にキーワードを混ぜる</p></div> として作成して、
文章と分ける意味で次の段階として<h2>リンクDirectory名</h2>を書いてからリンク集を作成しました。文字説明ではわかりにくい場合は、当サイトリンク集のソースを参照下さい。

この相互リンク集はスゴイ！と感じた海外SEOブログを
参考にして作成したのが、当サイトの相互リンク集です。
参照サイトの相互リンク集を見ながら、部分的に分解してご説明します。
前ページで解説しました通りのタイトルのつけ方に成っています。
本文の書き始めは、<h2>title</h2>の後にまず最初に説明文が続きます。
説明文</p></div>後の相互リンク集がサムネイル画像入りで綺麗に紹介。
サムネイル画像からのリンクは無く、基本テキストリンクと成っています。
テキストリンクは、<H3>リンク先タイトル</h3>です。
target="_blank" を入れた場合の検索順位が低く、外すと上りました。
<h3>タイトルの下に、<p>説明文</p>が続き内容は相手のDescription Cntentです。
xhtmlの記述方法は2種類有り、(1)URLにリンクする方法と(2)Title文字にリンクする方法です。
同じ Page Rank 数でページ単位のリンク発信数がバラバラだった為、上記(1)と(2)のどちらが高い評価を得られるか、
現在もまだ検証中です。

画像の右横に回り込む<h3>title</h3>のstyle-sheet.css記述
#right h3.friends { font-size:12px; padding:0; margin:5px 0 0 0; text-align:left; border-style:none; }

上記H3クラスのネーミングはご自由に！むしろ、当サイトと全く同じでは変です。
h3.partnerでも良いでしょうし、h3.link-titleなど変えて下さいませ。
また、文字サイズや余白は当サイトに合わせたものですので、padding や margin で調整して貴サイトのイメージに合うように体裁を整えてください。
paddingもmarginも時計回りに数字を入れます。上→右→下→左の順です。
margin:上px 右px 下px 左px; padding:上px 右px 下px 左px;と書きます。

画像の右横に回り込むxhtmlコード記述 <h3> URL </h3> - 相手URLにリンクを貼る
<h3 class="friends"><a href="相手サイトのURL/" title="相手サイトTOPページのタイトル" style="text-decoration: none;" target="_blank"><strong>http://相手サイトのURL/</strong></a></h3>
注意点スタイルシート側でH3のクラス名を変えて頂いているはずですので、xhtml側のクラス名も変更。
注意点相手サイトのURLの最後は必ずスラッシュ「/」をつけて相手ドメイン内ページ全てにリンク効果を！
注意点通常（一般的なセオリー）は、相手サイトのタイトル名を入れる場所に意図してURLを入れます。
注意点リンクにアンダーラインが出ないようにコーディングして有りますが必要に応じて外してください。
効果点文字にマウスを乗せると隠されたタイトルがポップで表示されます。
効果点相手先のURLが確実に検索エンジンに認識登録されます。
効果点サイトオーナー推奨の同一パターンでリンクを受けるより、効果的と思われる。

画像の右横に回り込むxhtmlコード記述 <h3>title</h3> - 相手タイトルにリンクを貼る
<h3 class="friends"><a href="相手サイトのURL/"style="text-decoration: none;" target="_blank" ><strong>相手サイトのタイトル</strong></a></h3>
注意点スタイルシート側でH3のクラス名を変えて頂いているはずですので、xhtml側のクラス名も変更。
注意点相手サイトのURLの最後は必ずスラッシュ「/」をつけて相手ドメイン内ページ全てにリンク効果を！
注意点リンクにアンダーラインが出ないようにコーディングして有りますが必要に応じて外してください。
効果点通常多くのWebmasterが用いる最もポピュラーなリンク方法で実績あり。
効果点パターン化されたタイトルよりも異なったキーワードでの多数のリンク紹介がAccess-upに繋がる。

サムネイル画像右横廻り込み<P>紹介文</p>の style-sheet.css コード記述
#right p.r-contents { font-size:12px; line-height:130%; padding:5px 5px 0 5px; margin: 0 5px 0 0; text-align:left; }
サムネイル画像右横廻り込み<P>紹介文</p>の xhtml コード記述
<p class="r-contents"> 相手サイトのDescription Cntent 説明文をコピペ </p>

2段目以降のリンクがズレないタグ
サムネイル画像や<h3>title</h3>、<p>説明文</p>の入力が終了しましたら、</p>の後に
<br style="clear:left" /> (左廻り込みの場合)や、<br style="clear:both" /> を挿入してサムネイル画像の廻り込みを一旦解除して下さい。
このタグを入れずに2段目以降も続けた場合には、I.E.以外のブラウザーで閲覧するとページ全体が、ズレズレに見えてしまうことが有ります。このタグは、相手サイトの紹介が終わる</p>段落終了ごとに挿入する必要が有ります。

次のページでは、相互リンク作成方法相手の選び方編をご紹介します。