ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML5: Web セマンティクスと SEO_html/css_WEB-ITnose
HTML5: Web セマンティクスと SEO_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:49:261160ブラウズ
タグの意味認識は HTML5 のコンテンツです。次の図は HTML5 の要素です。
要素のデフォルトの表現形式に応じて、ブロック、インライン (インライン)、インライン ブロックの 3 種類の要素に分けることもできます。
- ブロック要素: dc6dce4a544fdca2df29d5ac0ea9906b、e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1...4e9ee319e0fa4abc21ff286eeb145ecc、c34106e0b4e09414b63b2ea253ff83d6、ff6d136ddc5fdfeffaf53ff6ee95f185、5c69336ffbc20d23018e48b396cdd57a、b6fb39535bb1a1845b1daaca3b8b62f7、208700f394e4cf40a7aa505373e0130b、b8a712a75cab9a5aded02f74998372b4、ff9c23ada1bcecdd1a0fb5d5a0f18437 のスタイルは次のとおりです。各ブロック要素は新しい行で始まり、その後の要素も新しい行で始まります。要素の高さ、幅、行の高さ、上下の余白をすべて設定できます。幅のデフォルトは 100% です。
- インライン要素: 45a2772a6b6107b401db3c9b82c049c2、3499910bf9dac5ae3c52d5ede7383485、2e1cf0710519d5598b1f0f14c36ba674、d5fd7aea971a85678ba271703566ebfd、a1f02c36ba31691bcfe87b2722de723b、8e99a69fbe029cd4e2b854e244eab143、907fae80ddef53131f3292ee4f81644bスタイルは: { 表示: インライン; } です。 インライン要素は他の要素と同じ行にあり、要素の高さ、幅、行の高さ、上下のマージンは設定できません。幅は含まれる要素の幅であり、変更できません。
- インライン ブロック: a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd スタイルは: {display: inline-block; です。インライン ブロック要素は他の要素と同じ行にあります。ただし、要素の高さ、幅、行の高さ、上下の余白はすべて設定できます。
HTML5 スタイルを使用して HTML ファイルを記述する場合、次の例のように、DOCTYPE を使用してクライアントにドキュメントの解析方法を指示し、HTML は直接「html」になります。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body></html>
html5 には、div 関数を置き換えたり、関数を部分的に置き換えたりするための構造ベースの要素が多数あります。したがって、HTML5 を使用する際に従うべき原則は、強制ではなく自己正当化です。
HTML5 仕様によると、クラシックなページのデザインは上に示したとおりです。
ヘッダーから始めましょう。ヘッダーには通常、タイトル、サブタイトルなどが含まれます。複数のタイトルがある場合は、hgroup を使用して要素をラップする必要があります。
nav の主なコンテンツは、ナビゲーション情報とこのサイトの紹介コンテンツです。パス セットは、ol と ul を使用して形成されます。 hgroup および h パッケージも使用できるその他の導入要素です。
article 要素は、ページの実際のコンテンツを記述します。hgroup、h またはセクション、h、p を使用して、コンテンツをさらに構造化できます。もちろん、ヘッダーやフッターを追加することもできます。
section 要素は、グループのコンテンツ情報を記述します。テキストをグループ化する必要がある場合に使用できます。コンテンツ情報は、メディア要素 (オーディオ、ビデオ) を通じて簡単に記述することもできます。 embed は、Flash 埋め込みコンテンツを記述するためによく使用されます。内容を説明する必要がある場合、図を使用して内容に関連する情報を説明できます。
余談は本文とは関係のない補助的な情報を記述します。一部の記事や Web サイトのガジェットの注意情報を余談として記述できます。 footer はフッター情報です。
この部分の詳細については、shyleoking と IBMDW を参照してください。
html5 ではセマンティクスに関するコンテンツが非常に多く追加されていますが、セマンティクスとは正確には何でしょうか?
Web セマンティクスは、単純にマシンがデータ コンテンツを理解できるようにすることで、インターネットを使用して情報を取得する人間のエクスペリエンスを向上させます。 Web セマンティクスに加えて、人工知能 (AI) を使用して、機械によるデータの理解を強化することもできます。電子メールで開発されたドキュメント モデル (BOM、DOM) は、人間が読むのに便利です。データから表現されたオントロジーへのマッピングを機械が理解できるようにするには、Web セマンティクスを使用する必要があります。 (ハイパーテキストは、テキスト プロトコルを介してドキュメントの関係を拡張する機能です)
HTML 仕様は、実際に多くの要素と属性を設計する際に、さまざまなユーザーがアクセスできるようにする方法をすでに検討しています。そして、Web クローラーでさえ HTML ドキュメントをよりよく理解します。上で説明したように、HTML5 は以前の仕様に基づいており、すべてのプレゼンテーション層の意味記述を変更または削除し、より豊かな意味を表現できる多くの要素を追加しています。
さらに理解するには、Zhihu Q&A をお読みください。
検索エンジンは、Web クローラーを使用して Web サイト情報をクロールし、インデックスを構築します。たとえば、Google のロボットや Baidu の Baiduspider などです。検索エンジン最適化 (SEO) は、Web サイト関連スタッフによって、検索エンジンのクロール レベルを向上させ、Web サイトのランキングを向上させるために使用されます。ホワイトハット方式とブラックハット方式に分けられます。ホワイトハット手法では、ランキングの低下につながるエラーを見つけて修正し、検索エンジンをより使いやすくします。たとえば、グラフィック コンテンツを最適化し、ALT 属性を含め、テキストの説明を追加します。
検索エンジンは通常、関連するガイドラインを公開しており、この文書には、検索エンジンにとって許容されるものと許容されないものに従うためのガイドラインが含まれています。
たとえば、Baidu の Baidu SEO ガイド:
- 重要なコンテンツやリンクを表示するには、Flash、画像、JavaScript などの代わりにテキストを使用します
- Web ページを作成するために Flash を使用する必要がある場合は、テキスト バージョンも作成することをお勧めしますホームページはテキスト バージョンを指すためにテキスト リンクを使用します
- Ajax などの検索エンジンによって認識されないテクノロジーは、ユーザーの操作が必要な場合にのみ使用されます。 Ajax で検索エンジンに「表示」するナビゲーションおよびテキスト コンテンツ
- フレームおよび iframe フレームワーク構造を使用しない場合、iframe を通じて表示されるコンテンツは Baidu によって破棄される可能性があります
- ユーザーがチャネルや Web サイトのホームページに簡単に戻ることができるように、各ページにナビゲーション バーを追加します。これにより、検索エンジンが Web 構造内の Web ページのレベルを簡単に見つけることができます。
- ブレッドクラム ナビゲーションにより、ユーザーは Web サイト全体で現在いるページの位置を明確に把握でき、前のチャンネルやホームページに簡単に戻ることができます。 複雑な JS や Flash の代わりにテキスト リンクを使用します
- ナビゲーションに画像を使用する場合、Alt コメントを使用し、Alt を使用して Web ページのコンテンツが何を指しているのかを検索エンジンに伝えることができます。
- If Web ページは 1 つの URL にのみ対応します
- サイトが一時的に閉鎖され、Web ページを開けない場合は、すぐに 404 を返さず、503 ステータスを使用することをお勧めします。 503 は、ページが一時的にアクセスできないことを Baidu スパイダーに伝えることができます。しばらくしてからもう一度お試しください。
- Baidu スパイダーがサイトのクロールに過度の圧力をかける場合は、404 を使用しないようにしてください。また、503 を返すことをお勧めします。このようにして、Baidu スパイダーは、サイトがアイドル状態であれば、しばらくしてから再度リンクをクロールしようとします。
- 一部の Web サイトは、監査されたコンテンツ、一定期間にわたって蓄積された新しいユーザー ページなど、Baidu がコンテンツの一部のみを含めることを望んでいます。この場合、新しく投稿されたコンテンツは一時的に 403 を返し、レビューまたは処理後に通常の戻りコードに戻すことをお勧めします。
- サイトを移行した場合やドメイン名を変更した場合は301リターンをご利用ください。
- メタ ディスクリプションを上手に活用する
- Google は、Google SEO の初心者向けガイドもリリースしました:
説明メタ タグを有効に活用する
- URL の構造を最適化する
- サイトの検索と閲覧を容易にする
- 高品質のコンテンツとサービスを提供する
- リンクアンカーテキストを適切に記述する
- 画像の使用を最適化する
- 見出しタグを正しく使用する
- robots.txt ファイルをより効果的に使用する
- 注意してください rel="nofollow" を使用してください
- 上記はすべてホワイト ハット手法ですが、ブラック ハット手法は検索エンジンの戦略的欠陥を悪用し増幅します (実際、完璧なシステムは存在しません) ) より多くのユーザー訪問数を取得します。これも Web 開発では推奨されません。
- 要するに、ホワイトハットとブラックハットを判断する方法は、自分が作ったものがユーザーにとって価値があるかどうかです。
上記では、検索エンジンによる AJAX の情報キャプチャについても説明しています。 Baidu はクロールをサポートしていないようですが、Google はすでにクロールをサポートしています。また、HTML の履歴 API を使用すると、検索エンジンが単一ページの更新されたコンテンツを取得できるようになります。詳細については、ruanyifeng の記事をご覧ください