HTMLの様々なmeta要素

作成ファイル・保存場所

html-basic フォルダの中に meta-sample.html というファイル名で保存してください。

目的

HTMLの <head> 内に記述する meta 要素を使って、Webページの文字コード・レスポンシブ対応・検索情報・SNS表示などの基本設定を行えるようになる。

指示

以下のコード例を参考にしながら、自分で <head> 内の meta 要素を入力してみましょう。

<meta name="description"> を使ってページ説明文を記述
<meta charset="UTF-8"> を使って文字コードを指定
<meta name="viewport" content="width=device-width, initial-scale=1.0">を使ってスマートフォン対応
<meta name="robots" content="noindex"> を使って検索エンジンへの対応
<meta property="og:title"> などを使ってSNS用の情報（OGP）を設定

入力サンプル（HTML構造）

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 文字コードの指定（文字化け防止） -->
    <meta charset="UTF-8">
    <!-- タイトル（ブラウザタブに表示される） -->
    <title>My Portfolio</title>
    <!-- レスポンシブ対応（スマホ用の表示調整） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 検索エンジン向けのページ説明 -->
    <meta name="description" content="このサイトはポートフォリオ紹介用のWebページです。HTMLやCSSの学習成果を掲載しています。">
    <!-- 検索エンジンにインデックスさせたくない場合 -->
    <meta name="robots" content="noindex">
    <!-- SNSシェア（OGP）設定 -->
    <meta property="og:title" content="My Portfolio">
    <meta property="og:description" content="HTMLやCSSで制作した作品を紹介しています。">
    <meta property="og:image" content="https://dummy.kobeya.com/?width=600&height=400&text=OGP+Image">
    <meta property="og:url" content="https://example.com/portfolio">
</head>
<body>
    <h1>ポートフォリオへようこそ！</h1>
    <p>HTMLとCSSで作成したWeb作品を紹介しています。</p>
</body>
</html>

meta要素は覚えるというよりも、調べて使うところが多いニャン。覚える必要はないニャン