フロントエンド SEO — 詳細な説明-Linux-php.cn

フロントエンド SEO — 詳細な説明

1. 検索エンジンの動作原理

入力ボックスにキーワードを入力し、検索またはクエリをクリックすると、結果が得られます。その背後にあるストーリーを掘り下げてみると、検索エンジンは多くのことを行っています。

Baidu などの検索エンジン Web サイトでは、バックグラウンドで非常に大規模なデータベースがあり、多数のキーワードが保存されており、各キーワードは多くの URL に対応しています。これらの URL は、Baidu プログラムによって広大なインターネットから取得されます。 . 少しずつダウンロードされて収集されるこれらのプログラムは、「検索エンジンスパイダー」または「Web クローラー」と呼ばれます。これらの勤勉な「スパイダー」は、毎日インターネット上を巡回して、あるリンクから別のリンクに移動し、コンテンツをダウンロードし、分析して絞り込み、キーワードを見つけます。ユーザーにとって役に立たないものは、データベースに保存されます。逆に、「スパイダー」は、それがスパムまたは重複情報であると判断した場合、それを破棄し、最新の有用な情報を見つけるためにクローリングを続け、ユーザーが検索できるように保存します。ユーザーが検索すると、キーワードに関連する URL が取得され、訪問者に表示されます。

キーワードペアでは複数の URL が使用されているため、並べ替えに問題が生じます。そのため、キーワードに最もよく一致する URL が最初にランク付けされます。「蜘蛛」が Web コンテンツを巡回してキーワードを絞り込む過程で、「蜘蛛」がそれを理解できるかどうかという問題があります。 WebサイトのコンテンツがFlashやjsだと、理解できずわかりにくいですし、キーワードが適切であっても役に立ちません。同様に、Web サイトのコンテンツがその言語である場合、Web サイトはそれを理解でき、その言語は SEO です。

2. SEO の概要

正式名称: Search English Optimization、検索エンジン最適化。検索エンジンが存在して以来、SEO が誕生しました。

存在意義: 検索エンジンの自然検索結果における Web ページの数と順位を向上させるために行われる最適化動作。つまり、Baidu などの検索エンジンに、当社が注意深く作成した Web サイトがさらに含まれるようになり、他のユーザーが Web サイトにアクセスしたときに、その Web サイトが最初にランク付けされることを願っています。

カテゴリ: ホワイトハット SEO とブラックハット SEO。ホワイトハット SEO は、Web サイトのデザインを改善および標準化し、Web サイトを検索エンジンやユーザーにとってより使いやすいものにする役割を果たします。Web サイトは検索エンジンから適度なトラフィックを獲得することもでき、これは検索エンジンによって奨励され、サポートされます。ブラックハット SEO は、より多くのユーザー訪問を獲得するために検索エンジンポリシーの欠陥を利用および増幅します。この種の行為のほとんどは検索エンジンを欺くものであり、一般的な検索エンジン会社によってサポートまたは推奨されていません。この記事ではホワイトハット SEO に焦点を当てていますが、ホワイトハット SEO では何ができるのでしょうか?

1. Web サイトの位置付けを反映し、検索エンジンが Web サイトの機能を理解できるように、Web サイトのタイトル、キーワード、説明を慎重に設定します。

2. Web サイトのコンテンツの最適化: コンテンツとキーワードの対応、キーワード密度の増加;

3. Web サイト上で Robot.txt ファイルを適切に設定します;

4. 検索エンジンに適したサイトマップを生成します;

5. 外部リンクを追加し、さまざまな Web サイトで宣伝します;

3. フロントエンド SEO

Web サイトの構造レイアウト設計と Web ページコードの最適化により、フロントエンドページはブラウザユーザーと「スパイダー」の両方が理解できるようになります。

(1) Web サイトの構造とレイアウトの最適化: できるだけシンプルかつ要点を簡潔に伝えるように努め、フラットな構造を推奨します。

一般的に、作成する Web サイト構造のレベルが少ないほど、「スパイダー」によってクロールされやすくなり、組み込まれやすくなります。一般に、中小規模の Web サイトのディレクトリ構造は 3 レベルを超えており、「暗闇で迷ったらどうしよう」と「蜘蛛」が這い降りようとはしません。関連する調査によると、訪問者が 3 回ジャンプしても必要な情報が見つからなかった場合、その場を離れる可能性が高くなります。したがって、3 層のディレクトリ構造も経験を必要とします。このためには次のことを行う必要があります:

1. ホームページのリンク数を制御する

Web サイトのトップページは最も重要な場所であり、トップページのリンクが少なすぎて「橋」が存在しない場合、「クモ」が内部ページまで這い続けることができず、Web サイトに直接影響を及ぼします。含まれる Web サイトの数。ただし、ホームページ上のリンクが多すぎてはいけません。リンクが多すぎると、実質的なリンクがなくなり、ユーザーエクスペリエンスに影響を与えやすくなり、Webサイトのトップページの重量が減り、インクルージョン効果が低下します。良くないよ。

したがって、中小企業の Web サイトの場合、ホームページリンクは 100 個以下にすることをお勧めします。リンクの性質には、ページナビゲーション、ボトムナビゲーション、アンカーテキストリンクなどが含まれます。ユーザーの優れた経験に基づいて、ユーザーが情報を入手できるように誘導する必要があります。

2. ディレクトリ階層を平坦化し、「スパイダー」が Web サイト内の任意の内部ページに 3 回までジャンプできるようにします。「植物」 --> 「果物」 --> 「リンゴ」、「オレンジ」、「バナナ」などのフラットなディレクトリ構造。レベル 3 を通過するとバナナを見つけることができます。

3.ナビゲーションの最適化

ナビゲーションは可能な限りテキストベースにするか、画像ナビゲーションと組み合わせることができますが、画像コードを最適化する必要があります。フロントエンド SEO — 詳細な説明タグには、検索エンジンに情報を伝えるために「alt」属性と「title」属性を追加する必要があります。画像が正しく表示されない場合でも、ユーザーはプロンプトテキストも表示できるように、ナビゲーションの位置を調整します。

第二に、パンくずリストナビゲーションをすべての Web ページに追加する必要があります。利点: ユーザーエクスペリエンスの観点から、ユーザーは現在の位置と Web サイト全体における現在のページの位置を把握できるため、ユーザーは組織形態をすぐに理解できます。ウェブサイトの「スパイダー」は、位置情報をわかりやすくし、各ページに戻るためのインターフェースを提供してユーザーの操作を容易にします。「スパイダー」は、ウェブサイトの構造を明確に理解することができ、また、クローリングしやすいように多数の内部リンクを追加します。直帰率を下げてください。

4. Web サイトの構造レイアウト -- 無視できない詳細

ページヘッダー: ロゴ、メインナビゲーション、およびユーザー情報。

ページの本文: 左側にブレッドクラムナビゲーションとテキストを含むメインテキスト、右側に人気記事と関連記事。利点: 訪問者を維持し、より長く滞在させることができます。「スパイダー」の場合、これらの記事は次のとおりです。ページの関連性を高める関連リンクは、ページの重要性も高めることができます。

ページの下部: 著作権情報とフレンドリーリンク。

特に注意: ページングナビゲーションの書き方推奨の書き方: 「ホームページ 1 2 3 4 5 6 7 8 9 ドロップダウンボックス」で、「スパイダー」が対応するページ番号に従って直接ジャンプできるようにします。ドロップダウンボックスで、ジャンプするページを直接選択します。次の書き方は推奨しません。「ホームページ、次のページ、最後のページ」、特にページ数が特に多い場合、「蜘蛛」は這う前に何度も這い降りる必要があり、非常に疲れるし、与えやすくなります。上。

5. ページのサイズを制御し、http リクエストを減らし、Web サイトの読み込み速度を向上させます。

1 ページあたり 100k を超えないようにするのが最善です。大きすぎると、ページの読み込み速度が遅くなります。速度が非常に遅い場合、ユーザーエクスペリエンスは良くなく、訪問者を維持することができず、タイムアウトが発生すると「スパイダー」も去ってしまいます。

(2)Webページのコード最適化

1. タイトル: 重要なポイントのみを強調します。重要なキーワードは前に置くようにします。キーワードは繰り返し使用せず、すべてのページに含めるようにしてください。タイトルに同じ内容を設定しないでください。

2. タグ: キーワード。複数のページの重要なキーワードをリストします。詰め込みすぎないように注意してください。

3. タグ: Web ページの説明。Web ページのコンテンツの概要を示す必要があります。長すぎたり、キーワードを詰め込みすぎたりしないように注意してください。各ページは異なるものである必要があります。

4. タグ: コードをセマンティックにし、適切な位置で適切なタグを使用し、適切なタグを使用して適切な処理を行うようにしてください。ソースコードの読者と「スパイダー」の両方に対して明確にしてください。例: h1 ～ h6 はタイトルクラスに使用されます。

5. ハイパーリンクタグ: ページ内リンクの場合、訪問者や「スパイダー」にわかるように説明する「title」属性を追加します。他の Web サイトにリンクする外部リンクについては、el="nofollow" 属性を追加して、「スパイダー」が外部リンクをクロールすると戻ってこないため、「スパイダー」にクロールしないよう指示する必要があります。

6. テキストタイトルに h1 タグを使用します。「Spider」はそれが最も重要だと考えています。h1 が気に入らない場合は、CSS を通じて h1 のデフォルトスタイルを設定できます。本文のタイトルには h1 タグ、字幕には h2 タグを使用するようにしてください。ただし、それ以外の場所で h タイトルタグを安易に使用しないでください。

7. 改行タグ: テキストコンテンツの改行にのみ使用されます

8. 表では表タイトルタグを使用する必要があります

9. 画像は「alt」属性を使用して記述する必要があります

10. 太字の強調タグ: 強調が必要な場合に使用します。太字タグは検索エンジンで高く評価されます。キーワードを強調表示し、重要な内容を表現できます。強調タグの強調効果は太字タグに次ぐものです。

10. テキストのインデントには特殊な記号を使用せず、CSS を使用して設定する必要があります。著作権記号には特殊記号 © を使用せず、直接入力方法を使用して「banquan」と入力し、シリアル番号 5 を選択して著作権記号 © を入力できます。

12. CSS レイアウトを上手に利用し、重要なコンテンツの HTML コードを前面に配置します。前面のコンテンツは最も重要であると考えられ、コンテンツのキーワードを捕捉する「スパイダー」に優先的に読まれます。

13.「スパイダー」が認識しないため、重要なコンテンツの出力に JS を使用しないでください。

14. 通常、「スパイダー」はコンテンツを読み取らないため、iframe の使用はできるだけ少なくしてください。

15. 表示したくないテキストコンテンツについては、z-index を設定するか、ブラウザ表示の外側に設定する必要があることに注意して、display: none を使用します。検索エンジンは、display:none のコンテンツを除外するためです。

16. コードを継続的に簡素化する

17. js コードが DOM 上で動作する場合は、body 終了タグの前、html コードの後に配置する必要があります。

------------------------------------------------- --- ------------------------ ウェイター、車輪を 2 つください。