head内の記述

header内での記述

##解説

文字コード

<meta charset="UTF-8">

HTMLの記述形式（文字コード）を正しく設定することによって、ページが読み込まれたときの文字化けを防ぎます。

TDK

<title>【サイト名】-【軽い説明文】</title>
<meta name="description" content="【情報の説明文50～100文字で書く。（英語の場合、カタカナ、読みも書く）】">
<meta name="keywords" content="【伝えたい、情報を、約5つ、ほど、単語で書く】">

ページの【title(題名)】、【description(説明文)】、【keywords(関連する単語)】を設定します。

スマホ

<meta name="viewport" content="width=device-width">

携帯端末でのウェブページの表示方法を制御します。viewportを設定すると、ページの幅や拡大縮小を制御できるようになります。

外部リンク

<link rel="stylesheet" href="【cssのパスを書く】">
<script src="【jsのパスを書く】"></script>

外部のCSSファイルやJSファイルを読み込みます。

オルタネイト

<link rel="alternate" media="" href="">

デスクトップ用ページに対し、代替のURLが存在することを示すのに使われます。
(スマホサイト用のページなどがある場合に、PC用ページにスマホサイト用のページのURLを書く)

評価

<link rel="canonical" href="http://hoge.com/hoge.html">

マイナス評価を避けるために必要。同じようなページがいくつもある場合に書く。
(スマホ用のページなどがある場合、スマホ用ページにはPC用のページURLを書く。)

評価

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

検索エンジンにさまざまな指示を与えることができるタグです。

ファビコン

<link rel="shortcut icon" href="favicon.ico"> 

ファビコンの設定を行う 拡張子は.icoでなければいけない。
(ファビコン(Favicon)とは、Webブラウザのアドレスバーやタブに表示されるアイコンのことです。)

OGP

<meta property="og:type" content="article"/>
<meta property="og:image" content="【見せたい画像URL】">
<meta property="og:title" content="【ページのタイトル】">
<meta property="og:description" content="【ページの説明】">
<meta property="og:url" content="【ページのURL】">
<meta property="og:site_name" content="【サイト名(トップページに合わせる)】">
<meta property="og:locale" content="ja_JP">
<meta property="fb:admins" content="FBのユーザーID">

OGPとは、FacebookやmixiなどにWebページをシェアするとき
そのページの記事のタイトル、URL、代表する画像、サマリーなどを正しく各ソーシャルメディアに伝えるためのメタ要素。

Twitter

<meta content="summary" name="twitter:card">
<meta content="@twitter_acount" name="twitter:site">

ツイート内にURLが含まれている場合に、そのページのタイトルや概要、アイコン写真などを表示する。

1行目はカードのタイプを示すもので、
2行目はそのサイトに対応するTwitterアカウント名を「@」込みで入れます。
あとはOGPの「og:url」「og:title」「og:description」「og:image」を参照してくれます。

※Twitter Cardsを利用するためには申請が必要です。

##まとめ

head内の記述は【 meta 】、【 title 】、 【 link 】の順に書く

まとめ

<meta charset="UTF-8">
<meta property="og:type" content="article"/>
<meta property="og:image" content="【見せたい画像URL】">
<meta property="og:title" content="【ページのタイトル】">
<meta property="og:description" content="【ページの説明】">
<meta property="og:url" content="【ページのURL】">
<meta property="og:site_name" content="【サイト名(トップページに合わせる)】">
<meta property="og:locale" content="ja_JP">
<meta property="fb:admins" content="FBのユーザーID">
<meta content="summary" name="twitter:card">
<meta content="@twitter_acount" name="twitter:site">
<meta name="description" content="【情報の説明文50～100文字で書く。（英語の場合、カタカナ、読みも書く）】">
<meta name="keywords" content="【伝えたい、情報を、約5つ、ほど、単語で書く】">
<meta name="viewport" content="width=device-width">
<meta name="robots" content="noindex">
<title>【サイト名】-【軽い説明文】</title>
<link rel="stylesheet" href="【cssのパスを書く】">
<link rel="alternate" media="" href="">
<link rel="canonical" href="http://hoge.com/hoge.html">
<link rel="shortcut icon" href="favicon.ico">
<script src="【jsのパスを書く】"></script>