04. 主なmetaタグとその役割

ナナさん、metaタグって何ですか？

良い質問だね、ミサキ！metaタグは、ウェブページに関する情報を提供するために使うタグなんだよ。

metaタグとは何か

metaタグは、HTMLの中でページについての情報（メタデータ）を記述するためのものです。これにより、検索エンジンやブラウザがページの内容を理解しやすくなります。具体的には、以下のような情報を含むことができます。

metaタグの種類

主なmetaタグには、以下の種類があります：

• description：ページの概要を示す
• keywords：ページの関連キーワードを示す
• author：ページの著者名を示す
• viewport：レスポンシブデザインのために使用
• robots：検索エンジンのインデックス作成に関する指示を与える
• og:title：OGPにおけるタイトル
• og:description：OGPにおける説明

具体的なmetaタグの例

以下は、よく使われるmetaタグの具体例です。

<meta name="description" content="このページは、metaタグについての情報を提供します。">
<meta name="keywords" content="meta, タグ, HTML, ウェブデザイン">
<meta name="author" content="ナナ">

OGPタグの説明と例

OGP（Open Graph Protocol）タグは、SNSでシェアされたときに表示される情報を設定するためのタグです。これにより、ページがシェアされた際に、適切なタイトルや説明、画像が表示されます。

OGPタグの例

<meta property="og:title" content="素晴らしいウェブデザイン">
<meta property="og:description" content="このページは、ウェブデザインの基本を学ぶための情報を提供します。">
<meta property="og:image" content="URL_of_image.jpg">
<meta property="og:url" content="http://example.com">

利用ケース・例

• SEO対策：meta descriptionやkeywordsは、検索エンジン最適化（SEO）に役立ち、検索結果にページが表示されやすくなります。
• SNSシェア：OGPタグを使うことで、SNSでシェアされたときに見栄えの良い情報を提供できます。
• レスポンシブデザイン：viewportタグを使うことで、モバイルデバイスでの表示を最適化できます。

まとめ

metaタグは、ウェブページに関する重要な情報を提供するために必要不可欠です。正しく使うことで、SEOやSNSでのシェアに大きく影響しますね。

なるほど、metaタグの役割がよくわかりました！

そうだね、ミサキ。これからのウェブデザインに役立てていこう！