-
2年前、私はSEOに興味を持ち始め、当時の学習ブームに乗って国内の様々なフォーラムやブログを訪問し、役に立つか役に立たないか分からない手法を片っ端から実践してきました。しかし、時が経つにつれて、ディープラーニング。インターネット上で広まっているさまざまな方法に疑問を感じましたが、リンクを送信したり、ソフトな記事を書いたり、キーワードを積み上げたりするなどのよく知られた方法が使い尽くされたとき、私はまだそれらを克服することができませんでした。同時に、SEO のより深く、より効果的な運用方法についても考える必要があり、紆余曲折を経て、私は以前の分野である「プログラミングとフロントエンド開発」に戻りました。 「一夜にして、自分が今やっていることが急に明確になった気がしました。それが最高のSEOではないでしょうか？」
正直に言うと、私の勉強は比較的閉じていて、「最高の SEO は SEO ではない」という状態には達していませんし、SEO に関する実践経験もあまりありません。よく考えているのは、現在の仕事をより良くする方法です。 SEO に統合され、今 SEO の定義を与えるとしたら、ネットワーク + ハードウェア + プログラム + サイト構造 + Web 標準 + コンテンツ + 人 インターネット上の多くの人が「コンテンツは王様」という概念について議論しています。 」と書かれていますが、他の多くの要素は無視されます。これらの要因が詳しく説明されていれば。この記事では、WEB 標準が SEO に及ぼす影響について説明したいと考えています。
本文は次のように始まります。
ウェブ標準と SEO の関係を理解するには、まず「ウェブ標準」とは何かを理解する必要があります。インターネット上で多くの説明文書を確認したと思いますが、まだ少し混乱していて混乱したくないと思います。インターネットから学ぶために段落をコピーしますが、結局のところ、私はまだ理解できません。Web 標準を理解するには、基本的な Web ページを構築することから始めなければなりません。
たとえば、最も単純な Web ページを作成したい場合は、HTML タグを使用する必要があります。たとえば、テキストを強調したい場合は、<strong> タグを使用する必要があります。テキストの色を変更したい場合は、<strong> タグを使用する必要があります。 <font color="color"> タグを追加する必要があります。新しい段落を開始したいので、< > タグを使用する必要があります。テキストを強調するために無意味なタグ <jacu> を使用することはできません。はそのようなタグではまったくなく、ブラウザはそれを解析できません。そこで、W3C (World Wide Web) Association という組織が立ち上がって、世界中のインターネット実務家にこう言いました。「誰もがいくつかの意見を持っています。これらのラベルを統一しましょう。どれが使用でき、どれが使用できないかを判断し、誰もがこれらのラベルが何に使用されるかを理解できるように、統一された合理的な説明を与えるでしょう。」その結果、HTML 1.0 標準が最終的に導入され、その後の修正と更新を経て、HTML 2.0 などのさらに多くの Web 標準が徐々に利用可能になりました。 .html 4.01、すべての Web ページで最も一般的に使用されている xmhtml1.0/1.1、およびまだ正式にリリースされていない xmhtml 2.0 標準はすべて、Web ページを作成するときに上位にあります。 Web ページの次のような文です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
これは実際にドキュメント モデルを定義します。これは xhtml 1.0 標準を使用して説明されます。
しかし、その後、Web ページのレイアウトはますます複雑になり、これらの HTML タグに依存するだけでは美しく美しいページを作成することは不可能になり、たとえば、特定の要素を補う必要がありました。画像を 20 ピクセル、テキストの間隔を 5 ピクセルにしたい場合、HTML だけで実現するのは非常に困難です。このとき、W3C は黙ってはいられず、「この機能を実現するためにさらに何かを定義しましょう」と立ち上がり、数え切れないほどの議論を経て、CSS 1.0 標準がリリースされました。これを使用すると、コンテンツのオフセット、間隔、その他の効果を簡単に実現できます。開発を経て、CSS 2.0 と CSS 3.0 に到達しました。 CSS でスタイルを定義するときは、全員がこの標準に従う必要があります。
その後、HTML と CSS だけに依存するのはまだ完璧ではないことがわかりました。人間とコンピューターのインターフェイスの相互作用が欠如しており、動的な効果を実現できません。 Web ページ上のものが動かせるようになればさらに良いということで、w3c ではドキュメント オブジェクト モデル インターフェイスを規定する emascript 標準を導入しました。文法などたとえば、一般的に使用される JavaScript は emascript 標準に準拠しています。
OK、これですべてが完璧になったようです。 HTML 標準、CSS 標準、および emascript 標準を使用すると、最終的に美しい Web ページを作成できるようになります。これらの標準をまとめて Web 標準に準拠するのは、次のとおりです。
たとえば、HTML は次のように記述されます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<頭>
<title>デモ</title>
</head>
<本文>
<p><font color="#ff0000">テキストの内容</font><p>
<img src="x.jpg" />
<dl>
<dt><h1>タイトル</h1></dt>
<dd>コンテンツ</dd>
<dd>コンテンツ</dd>
<dl>
<b>コンテンツ</b>
</body>
このコードは Web 標準に準拠していますか? これらのコードをもう一度分析してみましょう。最初の行では、ドキュメント タイプが xhtml 1.0 であると定義しています。これは、すべての HTML タグがこの標準に準拠して記述されている必要があることを意味します。本文の <p> タグでは、font タグがこの規格で廃止されており、color 属性もこのタグで廃止されているため、この段落は Web 標準に準拠していません。 <img> を見てみましょう。 align 属性は画像の配置を定義しますが、xhtml 1.0 標準では、img で alt 属性を定義する必要があるため、このコードは dl タグに準拠していません。 、dt はタイトルを定義します。xhtml 1.0 で定義されているように、<h1> タグはネストされます。 <h1> タグのネストは <dt> タグ内では許可されていないため、最後の <b> タグにも注目してください。このタグは最終的に Web 標準に準拠します。しかし、w3cはそれを言いました。今のところ、このラベルの意味はそのままにしておきます。ただし、よりセマンティックな <strong> タグを使用することをお勧めします。今後の新規格では、<b> タグを標準タグとして廃止する可能性があります。 HTML規格の制約については、該当ドキュメントをご確認ください。
そういえば。誰もが理解していると思います。このページは xmhtml 1.0 標準にも準拠していないため、Web 標準に準拠しているかどうかは、すべて定義したバージョンに依存します。ただし、このコードは で正常に解析できます。上で述べたように、標準はすべて上位互換性がありますが、現在定義している標準に準拠していないだけです。では、このコードを Web 標準に準拠させるにはどうすればよいでしょうか。方法は 2 つしかありません。 1. ドキュメント モデルの標準を下げる (これにより、より多くの問題が発生する可能性があります) 2. style 属性、img および alt 属性に色を入れるなど、コードを再変更します。タイプ。
インターネット上には、「Web 標準 = div + css は使用できない」という説明があります。上記の記事を読むと、理解するのは難しくありません。この概念は純粋に混乱を招くものであり、過度に一般化されています。テーブル レイアウトを使用する Web ページが Web 標準に準拠していないとは言えません。W3C は、テーブル レイアウトの使用が標準に準拠しないと定義したことはありません。 <table> タグは、すべてのバージョンで常に標準タグです。私たちは皆、レイアウトに div を使用しますが、他の人が推奨する実践方法は標準と同等ではないことを理解する必要があります。
前述したように、Web 標準は html/css/js を作成するときに定義するバージョンに依存します。たとえば、HTML が xhtml 1.0 標準を使用している場合、その HTML も xhtml 1.0 標準に準拠する必要があります。しかし、これは事実ではないようです。w3c の公式 Web サイト (http://www.w3) のすべてのページには、常に何らかのエラーが存在します。はい、興味のある友人はテストできます。現時点では、多くの Web ページが Web 標準に準拠していないため、良いランキングとトラフィックを獲得できます。 Web 標準 SEO との関係は何ですか? HTML の構造と解析から始める必要があります。
Web デザインは構造 (html) とプレゼンテーション (CSS) の分離を重視します。このようにして概念を理解することができます。構造物は家です。鉄筋コンクリートとレンガで作られた棚であり、その性能は、家の床を設置したり、壁を漆喰で塗ったり、装飾したりすることです。構造がなければ、パフォーマンスには実際のパフォーマンスの価値はありません。 そのため<font color="#ccc" size="12">テキスト</font> やそのようなタグやプロパティは、構造の場合はパフォーマンスに似ているため、最初の記事で述べたように、標準は上位互換性があるため、フォント タグを xhtml 1.0 の厳密なページに適用すると、それはプレゼンテーション層、つまり CSS に残る必要があります。 。
ブラウザと検索エンジンが HTML を解析する方法を理解しましょう。なぜここでブラウザについて説明するのでしょうか? 私の考えでは、検索エンジンとブラウザは Web ページをクロールするときに、HTML 解析が開始されるからです。これにより、最終的にページ全体が厳密な親子関係ノードを持つ DOM ツリーに解析されます。そして、たとえば次のコードを作成したときに、それをユーザーに提示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<タイトル>タイトル</タイトル>
</head>
<本文>
<div id="トップ">
<h1>これはタイトルです<h1>
<img src="xx.jpg"/>
<p>これは<strong>テキスト</strong>です<p>
</div>
<div id="コンテナ">
<h2>これは別のタイトルです</h2>
<p>これは別の<strong>テキスト</strong>です</p>
</div>
</body>
</html>
これは、xhtml 1.0 移行標準に基づく HTML であることがわかります。多くのエラーがあります (エラーには、最初の div の <h1> タグに終了タグがありません。img に alt 属性がありません。<p> タグが含まれます)。終了タグもありません)。ただし、このコードをブラウザに入力して実行すると、<h1> タグが正しく機能することがわかります。 P タグも機能し、画像を表示できます。なぜこのコードに正しいタグがないのに、このコードが間違っていないと仮定すると、なぜブラウザで正しく解析できるのか、非常に驚きます。 dom 構造は次のようになります (図 1)。
一昨日16時58分に添付ファイル（16.49KB）をアップロードおよびダウンロード
なぜブラウザは間違ったコードを正しく解析できるのでしょうか?そして、エラーコードの真の意図を「推測」することもできるようです。原則として、ブラウザはタグ ツリーを構築するときに辞書分析モードと照合モード (HTML Tidy) を使用します。簡単に言うと、ブラウザはすべてのタグと属性を組み込み辞書の情報と照合し、一致が正常であれば直接解析されます。仕上げモードを有効にするだけで、間違ったコードが分析されて修正されます。たとえば、上記の最後の <h1> タグと <p> タグが自動的に終了タグに変更されます。 <jiacu> テキスト</ jiacu> タグのペア。これでは全く対応できず、修理も不可能です。無効なタグのペアを直接クリアし、内部のテキストのみを残します。もちろん、ブラウジングによって HTML が DOM ツリーに解析される場合、HTML ソース コードは変更されません。したがって、ページ上の HTML エラーを確認しないと、これらのエラーが見つからないことがよくあります。ブラウザが自動的に修正してくれるからです。一般に、ブラウザは HTML のエラーに対する完全な互換性を保証します。役立つ場合は修正してください。冗長なタグまたは属性をクリアできる場合はクリアされ、クリアおよび修正できない場合は、タグは自動的に削除され、正常に表示されます。
ただし、「整理モード」は万能ではありません。ブラウザがすべてのエラーを修正してくれるとは期待できません。ページがますます深くネストされ、タグやコンテンツが増えていくと、ブラウザはタグを修正できません。できることは「エラー ブロック内のすべてのタグを削除し、コンテンツのみを保持する」ことだけです。
検索エンジンの観点から見ると、コンテンツを分析する前の前提はブラウザと同じであり、完全な DOM ツリーを構築する必要があります。このツリーが完成した場合にのみ、検索エンジンはページ内のコンテキスト関係を判断できます。ページ内でどの重み付けタグ (<strong>、<h1> など) が使用されているか、およびその配布位置など。ただし、検索エンジンは解析時に「コンテンツ ブロック」の概念、つまりブロックごとに 1 つのタグを重視します。まだ上記の HTML の例です。検索エンジンがこの DOM ツリーを構築しているときに、最初の div の <h1> タグを解析したときに、P タグを解析したときに別のエラーが発生したことがわかりました。この DOM ツリーを正しく構築すると、仕上げモードが有効になりますが、この時点のモードはエラーの修正に役立つ可能性はありませんが、「ブロック」単位で行われます。エラーブロック（ノード）の上位ブロック（ノード）を検索します（上位レベルにエラーがまだある場合は、上位ブロックにエラーがなければ、すべてのサブレベルを検索します）。 - この上位レベルのブロック内のブロックとサブブロックが検索され、サブブロック内のすべての誤ったタグが削除されます。つまり、<div id="top"> 内のすべての誤ったタグが削除されます。構築されるツリーは上の図 2 のようになります (2011.4.5 改訂: 図 2 に小さな間違いがあります。左側の div タグの下に img タグがあります)。
このように、慎重に記述した <h1> タグと <strong> タグが解析後に消えており、HTML 解析の原理に従って、ブロック全体の「重み」が変化していることがわかります。結論：
1. ページ ノード レベルが高くなると、ラベル レベルのエラーに特に注意する必要があります。たとえば、終了タグの記述を少なくする必要があります。 SEOにとって致命的です。
2. どのようなレイアウトを使用する場合でも、ノードのネスト レベルが少ないほど良いです。第 1 に、ノードを解析する際の検索エンジンの負担が軽減されます。第 2 に、検索エンジンがノード間の (コンテキスト) 関係を判断しやすくなります。 , キーワードの重み付けは重要です。
3. ラベルの属性をcssで置き換えられる場合は、可能な限りcssに移動します。
4. ブラウザーと検索エンジンの両方で HTML エラーが許容されますが、同じ外部条件下では標準 HTML の方がより良いランキングを取得するのが明らかに簡単です。
この記事を書くのに 4 時間近くかかりましたが、あまり詳しくない部分もありますので、3 番目の記事で共有します。
記事出典：Lightyear Forum（転載の際は出典リンクと著者を明記してください）
記事の著者: newyhj