TIL.05 Semantic Web & Semantic Tag

仮想ページとは,Web上に存在する多くのページにメタデータを付与し,本来複雑なデータセットであるページを「意味」と「相関」を持つ巨大なデータベースに構築する考え方である.poiemaweb -

SEOとシンボル要素

検索エンジン最適化:検索エンジン最適化(SEO)などのマーケティングツールを用いて、検索エンジンは自分のサイトを検索するのに適した構造に基づいてサイトを調整し、これは基本的に検索エンジンがどのようにサイト情報を収集するかを知ることから始まる.
検索エンジンはロボット(Robot)というプログラムを利用して毎日世界中のサイト情報を収集している.(これをスクロールと呼び、検索エンジンのスクロールによって実行されます.)そして,検索サイトユーザが検索可能なキーワードを予め予測することにより,検索キーワードに対応するインデックス(インデックス)を作成する.(これをインデックスと呼び、検索エンジンのインデックスが実行します.)
インデックスを生成する際に使用する情報は、ロボットが収集した情報を検索し、最終的にはウェブサイトのHTMLコードです.つまり、検索エンジンはHTMLコードだけでその意味を認識し、「シンボル要素」(Semantic element)を解釈する.
-ソース:https://poiemaweb.com/html5-semantic-web

HTML Semantic

ここにはH 1 tagとstyleが追加されたspanラベルがあります.2つのラベルの外観の結果は同じです.しかし、この二人の影響力には大きな違いがある.
検索エンジンは、h 1ラベルに含まれるコンテンツをWebドキュメント全体で重要なタイトルとして認識する可能性が高い.また、このコードを表示する人も、h 1ラベルが重要な要素であることを見ることができます.
逆に,スタイルを含むspanタグはh 1タグと視覚的には同じであるが,検索エンジン,ブラウザ,開発者にはh 1タグと同等の重要な情報を伝えることはできない.
意味要素は開発者の意図と意味を正確に含んでいるため,コードの可読性を向上させ,メンテナンスを容易にする大きな利点がある.

<h1>heading</h1>

<span style="font-size: 32px; margin: 21px 0; font-weight: 700;">heading</span>

Semantic Elements

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

<strong>

MDN Semantic Elements
tagDescriptionheaderヘッダを表します.navナビゲーションを表します.aside側にある空間を表します.これは、sectionのこのページの複数のコンテンツ(article)を含むワークスペースを意味します.文章の本文の主な内容が入る空間を意味する.かかとを表す.

reference

https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
https://poiemaweb.com/html5-semantic-web
https://youtu.be/T7h8O7dpJIg