【コピペ用】htmlのhead内一式(METAタグ等)

htmlのhead内に記述する内容は直近のものなどを利用することが多いのですが、毎回悩む部分もあります。

その時間を短縮できるようにコピペできるテンプレートを作成しました。ここを正として、コピペできるように調整し続けれればと思います。

html5、SEOを考慮した形、余計なものはなるべく記述しないを心掛けて随時調整していきます。

もしどなたかのお役に立てれば幸いです。

コピペ用html一式

コピーする
※最新のChrome/Firefoxでは動作確認済
※IE11はクリップボードを許可した場合動作確認済
※うまくコピーできない場合は手動でコピーしてください
<!DOCTYPE html>

<html>

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>★ページのタイトル★</title>
<meta name="description" content="★ページの説明★">

<meta property="og:title" content="★ページのタイトル★">
<meta property="og:description" content="★ページの説明★">
<meta property="og:type" content="website">
<meta property="og:url" content="★ページのURL★">
<meta property="og:image" content="★画像のURL★">
<meta property="fb:app_id" content="★appIDを入力★">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="★@~★">
<meta name="twitter:creator" content="★@~★">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="★サイト名★">

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

<link rel="icon" href="img/icon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="img/icon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="img/icon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="img/icon-64.png" sizes="62x62" type="image/png">

<link rel="stylesheet" href="css/style.css">
</head>

<body>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/common.js"></script>
</body>

</html>

簡単な説明

・★で囲っている箇所は編集が必要な箇所になります
・不要な箇所は削除してご利用ください
・css、js、iconは決め打ちで相対パスを記述しているので、必要に応じて変更してください

また、前提としてウェブサイト用に記述していますので、ブログ系であれば、下記 head の prefix属性を下記のように変更するのが良いかなと思います。
※詳細をまだ理解できていないので、理解でき次第追記したいと思います

『prefix=og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#』

prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#”』
※『website: http://ogp.me/ns/website#』⇒『article: http://ogp.me/ns/article#』に変更

 

以上です。ありがとうございました。