Logo

Logo

head内に書くべきタグを総まとめ

head内に書くべきタグを総まとめ

Division: 解説

Subject: METAタグ

headタグ内に書くべきもの一覧

headタグ内に書くべきもの一覧【重要】

1. 文字のエンコード

<meta charset="utf-8" />

重要 文字コードを指定するためものです。日本語のサイトであれば、必ず書いておきましょう。

2. Internet Explorer用の設定

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

3. viewport設定

<meta name="viewport" content="width=device-width,initial-scale=1" />

4. タイトルタグ

<title>そのページのタイトル</title>

headタグ内に書くべきもの一覧【推奨】

5. メタディスクリプション

<meta name="description" content="ページの内容を表す文章" />

6. meta robots

<meta name="robots" content="noindex,nofollow" />

7. OGPタグ/twitterカード

<meta property="og:url" content="ページのURL" /> 
<meta property="og:title" content="ページのタイトル" /> 
<meta property="og:type" content="ページのタイプ"> 
<meta property="og:description" content="記事の抜粋" /> 
<meta property="og:image" content="画像のURL" /> 
<meta name="twitter:card" content="カード種類" /> 
<meta name="twitter:site" content="@Twitterユーザー名" /> 
<meta property="og:site_name" content="サイト名" /> 
<meta property="og:locale" content="ja_JP" /> 
<meta property="fb:app_id" content="appIDを入力" />

facebookやtwitterなどのソーシャルメディアでシェアされたときに、リンクを魅力的に表示させるための設定です。ソーシャルメディアからの流入を伸ばすために必須です。

8. URLの正規化(link rel=”canonical”)

<link rel="canonical" href="正規化するURL" />

参考サイト

類似記事