【コピペ用】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#」に変更

まとめ

改善の余地はありそうですが、それなりには使えるかなと思います（笑）。気になった方は是非使ってみてください。

↓こちらもソースをコピーして使えますので、よければ見てみてくださいね。
参考：【HTML＆CSS】ランキングやバナーのリストに使える！コピペするだけ！

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク