プログラミングBlog

トップ > HTML５検定 > htmlのmeta要素

htmlのmeta要素

HTML５検定 HTML

HTML5プロフェッショナル認定試験

HTML5プロフェッショナル認定試験に出てきそうなmeta要素をメモ程度にまとめる。
Web資格なら「HTML5プロフェッショナル認定試験」公式サイト

meta要素

  • meta要素とは・・・Webページに関する情報を埋め込むことができる。

    charset

    文字コードを指定する 

<meta charset="UTF-8">

description

ページの説明を記述
検索された際にタイトル + 説明文が表示される。
こちらの説明文をきっちり書くと、クリック率が上がるらしい。

<meta name="description" content="meta要素のサンプルページ">

dafault-style

優先するスタイルシートの決定
以下の例だとfirstが優先的に指定される。

<meta http-equiv="default-style" content="first">
<link rel="stylesheet" type="text/css" href="sample.css" title="first">
<link rel="stylesheet" type="text/css" href="sample2.css" title="second">

reflesh

Webサイトが引っ越しした際の転送に使われる。
contentが何秒後に転送されるか指定。
urlが引っ越し先のURL。

<meta http-equiv="reflesh" content="3; url="sample2.html">

robots

検索エンジン（クローラー）に対する設定ができる
allがdefault値

<meta name="robots" content="all">

content-security-policy(CSP)

セキュリティーポリシーを設定する
js, css, 画像などの読み込みをサイト自身のオリジンからのみ許可する設定。
XSS対策。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

f:id:Tokuty:20210704214323p:plain

  • エラー出ましたが、インラインスクリプトを許可する設定script-src 'sha-256-xxxxxxxxxxxxxxxxxxx='を埋め込むとエラー解消されました。
<meta http-equiv="Content-Security-Policy" content=default-src 'sha256-xxxxxxxxxxxxxxxxxxx='">

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">]

表示領域のこと。
このmeta要素なしでF12にてレスポンシブしてみると非常にわかりやすい。
画面のサイズに合わせて、表示領域を変更してくれる。
いろんなサイトを調べましたが、上記の設定値が最適解な模様。

全体のコード

sample.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="meta要素のサンプルページ">
    <meta http-equiv="default-style" content="first">
    <link rel="stylesheet" type="text/css" href="sample.css" title="first">
    <link rel="stylesheet" type="text/css" href="sample2.css" title="second">
    <meta name="robots" content="all">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';'">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p class="sample.css">sample</p>
    <script>
        window.alert("hello world");
    </script>
    <script src="./sample.js"></script>
</body>

</html>

sample.css

p{
    color:red;
}

sample2.css

p{
    color:green;
}

sample.js

window.alert("hello world");

参考サイト

nature-company.com <meta name="robots">（robotsメタタグ）の正しい使い方と記述時のポイント | デジ研 qiita.com developers.google.com developer.mozilla.org