-
この期間、SEO 最適化に関する記事をたくさん読みましたが、そのほとんどが外部リンク、記事内の内部リンク、PR 改善などの運用段階の知識について述べており、特定の検索エンジン最適化についての経験談も含まれていました。 。この手の記事は本当に多すぎて、あまり読んでしまうとどれも同じで新鮮味がないと感じてしまいます。主にSEO最適化におけるHTMLレイアウトに関するいくつかのテクニックについてお話します。著者は生まれながらのプログラマーなので、少し専門的な内容になりますが、ご理解いただけると幸いです。
多くの Web サイトのホームページには、スライドショーの形式で切り替えることができるヒート マップ モジュールが備わっています (下の図を参照)。
このモジュールは、作者の Web サイトを含む国内 Web サイトの 70% を占めています。この効果のコードは HTML ドキュメント構造の先頭部分にあることが多く、最も一般的なのは Flash またはナビゲーション バーの下にあります。 JS スクリプト、最も一般的に使用されるレイアウト コードは次のとおりです。
<div class="バナー">
<オブジェクト>
FLASH版
</オブジェクト>
</div>
<div class="バナー">
<script type="text/javascript">
JavaScriptのバージョン
</script>
</div>
著者は、上記のコードが HTML の先頭部分に挿入されると、SEO の最適化に悪影響を与えるだけでなく、一般のユーザーにとっても非常に憂鬱になると考えています。ウェブマスターの友人なら誰もが知っているように、先頭部分は SEO にとって不利です。これは検索エンジンが重視するものであり、JS や FLASH を使用して実装すると、これらのコードは検索エンジンには認識されませんが、他の重要な部分が検索エンジンに最初に表示され、認識できないものが表示されます。後で。一般のユーザーにとって問題となるのは、このエフェクトを実装するには通常 4 ～ 5 枚の画像を切り替える必要があり、実装に JS を使用するか FLASH を使用するかに関係なく、これらの画像の合計サイズが少なくとも約 200KB になることです。 HTML ドキュメント、ユーザー これらが読み込まれるまで待たなければなりません。特に画像が大きい場合、ヘッダー領域でスタックしてブラウザがフリーズする可能性が高くなります。これはユーザーにとって最も恐ろしいことです。
この期間中に、著者はいくつかの解決策をまとめました。長期的な観察を通じて、これらの解決策が問題なく、ランキングに影響せず、含めることが正常であることが実践で証明されました。私はそれらをここで皆さんに大胆に共有します。
1. 構造順序の調整
過去の植字とレイアウトの経験によれば、コードは次のようになります。
HTMLコード:
<本文>
<div class="コンテナ">
<div class="header">ヘッダーの内容</div>
<div class="banner">スライドショー効果モジュール</div>
<div class="content">テキストコンテンツ</div>
<div class="copyright">著作権セクション</div>
</div>
</body>
CSSコード:
本文 {マージン:0;パディング:0;テキスト整列:センター;}
.container {幅:980px;マージン:0 自動;位置:相対;背景:シルバー;}
.header {高さ:200px;行の高さ:200px;背景:赤;}
.banner {高さ:150px;行の高さ:150px;背景:黄色;}
.content {高さ:400px;行の高さ:400px;背景:青;}
.copyright {高さ:50px;行の高さ:50px;背景:緑;}
著者が改良したコードは次のとおりです。
HTMLコード:
<本文>
<div class="コンテナ">
<div class="header">ヘッダーの内容</div>
<div class="content">テキストコンテンツ</div>
<div class="copyright">著作権セクション</div>
<div class="banner">スライドショー効果モジュール</div>
</div>
</body>
CSSコード:
本文 {マージン:0;パディング:0;テキスト整列:センター;}
.container {幅:980px;マージン:0 自動;位置:相対;背景:シルバー;}
.header {高さ:200px;行の高さ:200px;背景:赤;}
.banner {位置:絶対;トップ:200px;幅:980px;高さ:150px;行の高さ:150px;背景:黄色;}
.content {margin-top:150px;height:400px;line-height:400px;background:blue;}
.copyright {高さ:50px;行の高さ:50px;背景:緑;}
上記のコードの比較分析を通じて、CSS の位置フローティング レイアウト手法を実際に使用しました。この知識ポイントは、SEO の最適化に非常に役立ちます。
2.遅延読み込みを上手に利用する
HTMLコード:
<本文>
<div class="コンテナ">
<div class="header">ヘッダーの内容</div>
<div class="content">テキストコンテンツ</div>
<div class="copyright">著作権セクション</div>
<div class="banner"></div>
</div>
</body>
JQueryコード:
$(document).ready(function() {
window.setTimeout(function() {
FLASH版
$(".banner").html("<object>ここに FLASH コードが挿入されます</object>")
Ajaxのバージョン
$.get(" http://www.flagwind.com/GetBanner.html ", function(data){
$(".banner").html(data);
});
}, 3000);
});
この Jquery コードの一般的な意味は、ドキュメントがロードされた後、3 秒後に AJAX リクエストまたはその他のものを実行して、バナー DIV 内のコンテンツを制御することです。
上記の 2 つのソリューションのコードはほんの一例であり、他の場所で使用したり、SEO に関係のないコンテンツを後で読み込んだり、JS を使用して表示の読み込みを遅らせたりすることができます。これは検索に大きな影響を与えません。しかし、それは一般のユーザーにとっても良いことです。この記事は元々、深センのウェブサイト構築会社である Flagwind Network www.flagwind.comによって作成されたものです。転送する場合は、元の著者の著作権情報を削除しないでください。
Shenzhen Qifeng Network の貢献に感謝します