HTML セマンティクスといくつかの簡単な最適化

1. セマンティクスとは何ですか?

Bingオンライン辞書の説明

セマンティックとは、文書コンテンツのフォーマットに適切な HTML タグとその固有の属性を使用することを指します。平たく言えば、セマンティクスとは、機械が理解できるようにデータと情報を処理することです。セマンティック (X)HTML ドキュメントは、PDA、テキスト ブラウザー、障害のある人などの訪問者にとって Web サイトの使いやすさを向上させるのに役立ちます。その恩恵を受けます。検索エンジンやクローラー ソフトウェアの場合、インデックスの構築に役立ち、より高い重みを与える可能性があります。 実際、SEO にとって最も効果的な方法の 1 つは、Web ページの HTML 構造 (本質的にはセマンティクス) を再構築することです。

簡単に言うと、コンテンツの構造 (コンテンツ セマンティクス) に基づいて、開発者がより洗練されたコードを読み書きできるようにするための適切なタグ (コード セマンティクス) を選択すると同時に、ブラウザ クローラーやマシンがコードを適切に解析できるようにします。どのようなコンテンツにどのようなタグを使用するか。

2. セマンティクスの利点は何ですか?

• CSS ファイルが正常に読み込まれていない場合でも、ページは適切なコンテンツ構造を表示できます。
SEO に役立ち、検索エンジンやクローラー ソフトウェアがより有用な情報をクロールし、インデックスを構築し、より高い重みを取得できるようになります。
• 他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が意味のある方法で Web ページをレンダリングするのに便利です。

3. HTML5 の意味化

最新の HTML5 では、Web ページの構造化に構造化タグのシステムが追加されています

構造:

リーリー

4. HTMLを書くときに注意すべきこと

タグ閉鎖 、/>;

タグのネストを正しく使用して、ブロック要素を囲むインライン要素を回避します。
• タグを合理的に使用し、可能な限り少ないセマンティック タグを div や span として使用すると、CSS ファイルが正常に読み込まれない場合でも、ページに適切なコンテンツ構造を表示できます。
タイトルとして

、

、

、

、

、

を使用し、重要度の高い順に

を使用します。

段落を区別するには

を使用し、
を使用しないでください。

純粋なスタイルタグ、b、font、u などを使用せず、CSS 設定に変更してください。

表を使用する場合は、、、 を使用して、head、body コンテンツ、および表を囲みます。

5. SEO の最適化について、HTML では何をする必要がありますか?

ドキュメント タイプは HTML5 doctype ;を使用します

メタタグの最適化には、主にタイトル、説明、キーワードの 3 つの場所が含まれます。最後に「>」を使用しないでください。

1 つの CSS ファイルを使用してヘッダー に配置するのが最善です。 js ファイルの読み込みによる HTML レンダリングのブロックを避けるために、js ファイルを一番下に配置することをお勧めします。 CSS や JS コードを HTML に直接記述することを避けるために外部ファイルを使用します。

ファイルをインポートするときは絶対アドレスを使用します。

絶対アドレスには Web サイトのドメイン名が含まれます。
• img タグと alt キーワードは、SEO の最適化に役立ちます。「of」、「up」、「good」、「etc.」などは、デフォルトでは検索エンジンのデータベースに含まれていません。
• ロゴに h1 タグを追加します。このタイトルは Web ページで最も重要な情報であるため、最も重要な情報を

  タグに追加します。

• HTML Webページが基準を満たしているかどうかは、このWebページでチェックし、リンクを直接入力してチェック結果を表示できます
• https://validator.w3.org/nu/