head内 まとめ
Webデザイナーさんのブログを参考にまとめています。
まずはこちら。
<head prefix="og:http://ogp.me/ns#">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<title>tossaurus portfolio</title>
<meta name="description" content="とある福岡のWebデザイナーのポートフォリオ">
<link href="https://tosssaurus.com" rel="canonical">
<meta property="og:url" content="http://tosssaurus.com">
<meta property="og:type" content="website">
<meta property="og:title" content="tosssaurus portfolio">
<meta property="og:site_name" content="tosssaurus portfolio">
<meta property="og:description" content="とある福岡のWebデザイナーのポートフォリオ">
<meta property="og:image" content="http://tosssaurus.com/snscard.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@tosssaurus">
<link rel="apple-touch-icon-precomposed" href="/img-common/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/style.css">
</head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>そのページのタイトル</title>
<meta name="description" content="ページの内容を表す文章" />
<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を入力" />
<link rel="canonical" href="正規化するURL" />
<link rel="stylesheet" href="CSSファイルのURL" />
<script src="JavaScriptファイルのURL"></script>
.
<!-- ここから推奨タグ -->
<link rel="icon" href="画像URL" sizes="16x16" type="image/png" />
<link rel="icon" href="画像URL" sizes="32x32" type="image/png" />
<link rel="icon" href="画像URL" sizes="48x48" type="image/png" />
<link rel="icon" href="画像URL" sizes="62x62" type="image/png" />
<link rel="apple-touch-icon-precomposed" href="画像のURL" />気になったことメモ。
・サルワカさんのタグ、閉じタグが『 />』なのはなぜ？
ドキュメントタイプ（!DOCTYPE）によって必要かどうか変わる。
HTML5であれば、『>』でも『 />』でも問題ない。
XHTMLであれば、『 />』と記述しなければならない。
https://takuo4649design.com/weblog/note/archives/1288
・viewportの書き方が両者で違う。
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width,initial-scale=1" />initial-scale=1があるかないか。
まず【content="width=device-width"】は、幅をデバイスの幅に合わせてねって指示。
【initial-scale=1】は、初期表示時のスケールを指定・・・。
このあたりは、ちょっと難しくて理解できないのでまた後日。
width=device-widthとして、initial-scaleを指定しない場合は、自動的にinitial-scale=1となるそうなので、書いても書かなくても一緒。
サルワカさんの記事に２つ知らないタグがあったのでメモ。
●Googleの検索結果を操作するタグ
<meta name="robots" content="noindex,nofollow" />googleのクローラーに検索結果に表示しないで！と指示が出せるタグ。
例として、検索結果ページや低品質なページ、ユーザーにとってあまり価値がないページにこれを指定する場合がある。
noindex,nofollow で、インデックス(掲載)もクロールもしないで！
index,follow で、インデックス(掲載)はしないけど、クロールはして！
ちなみに、
index,followは、このタグを書かないのと結果同じ。
●PCとSPでURLが異なる場合、使うタグ
<link rel="canonical" href="正規化するURL" />スマホ用ページのhead内に <link rel="canonical" href="PC用URL" />を書いておけば、検索からの評価をまとめることができる！