Zenn
💻

セマンティックWebとmicroformatsについて

に公開
Web
web開発
tech

この記事について

名著「Webを支える技術」のトピックを自分なりにまとめた記事です、Next.jsにおいての実践的にあつかうところまでカバーしました。

参考にした文献等

mdn web docsについては、セマンティクスについてのページとHTMLのマイクロフォーマットについて記述される部分を参考にさせていただきました。

概要

そもそも、セマンティクスってなんぞや？microformatsってなに？？という方は是非ご覧ください。

セマンティックスとは

このセマンティックスという単語がWeb開発で意味するところは、「HTMLなどで表現されたテキストが、どんな意味を持つかを プログラム にも解釈できるようにしよう」というのが大枠の意味です。

少し解釈を拡張してみると「Web上のテキストデータの意味が形式的に理解できるようにしよう」という試みだと思っていただけると一般的だと考えています。

microformatsとは

microformatsとは、前述をセマンティックスをHTMLに導入するための機能です。

HTML形式で書かれた、テキストの意味を検索エンジンなどのプログラムが理解できるようにするために存在します。

実践的にやってみる

今回は個人開発で作成している、Blog Appの記事と著者部分にmicroformatsを導入してみようと思う。

ブログ本文にh-entryを追加

// 記事に対してh-entryを追加
<article className="h-entry"></article>

// 記事のアイキャッチ部分にu-photoを追加
<Image
    src={`url`}
    alt="eyecatch"
    fill
    className="u-photo"
/>

// 記事のタイトルにp-photoを追加
<h2 className="p-name"></h2>

// 記事の更新日にdt-updatedを追加
<p className="dt-updated">{updatedAt}</p>
プロパティ 説明
h-entry ここからはweb上の日付付きコンテンツ
u-photo 記事の写真
p-name 記事のタイトル
dt-updated 記事の更新日

こんな感じでプログラムにも解釈されるようになった。

記事の著者情報にh-cardを追加

// 著者情報に関する記述にh-cardを追加
<div className="h-card"></div>

// 著者のicon画像にu-photoを追加
<Image
    src={`url`}
    alt="icon"
    className="u-photo"
/>

// 著者のユーザー名にp-nameを追加
<p className="p-name">Ayumu3746221</p>
プロパティ 説明
h-card これは個人の情報ですよ
u-photo icon写真
p-name 個人の名前

みたいな感じでプログラムに解釈されるようになった。

Discussion