ヘッダーのメタ要素まとめ
最初の記事になるからあんぷら屋でまとめる内容について先に1つだけ。
細かい・正確な情報は、qiitaとかそこら中にあふれているので基本割愛します。
どちらかといえば、いざ制作するときに見返すブックマークのような内容をまとめていく予定です。
2018-05-24 追記：ソーシャル関連のタグについて追記しました。
で最初はヘッダーについて。
ひと昔前と比べたら相当シンプルにわかりやすくなりました。
あんぷら屋のソースはこんな感じ。
2019-04-10 追記：リニューアル前の情報です。
<!DOCTYPE html>
<html lang="ja">
<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 name="format-detection" content="telephone=no">
<!-- ファビコン関連 -->
<!-- ソーシャル関連 -->
<!-- スタイルシート、webフォント -->
<!-- 解析タグとか -->
</head>
<body>
<!-- コンテンツ -->
</body>
</html>
metaタグ箇所以外省略してます。
ベースこんなかんじで、telephone=noだけは場合によってつけたりつけなかったり。
OGPタグについては、最低限以下のタグがあればよさそうです。
<meta property="og:title" content="OGPのタイトル">
<meta property="og:type" content="article" />
<meta property="og:description" content="OGPのディスクリプション">
<meta property="og:url" content="ページのURL">
<meta name="twitter:card" content="summary">
<meta property="og:image" content="載せたい画像のURL">twitterとfacebookに最低限対応する分には、headタグにprefixとかもなくていいみたいです。あとLINEも。
og:typeは、トップページは「website」、それ以外は「article」にしとく。
doctype宣言にパターンがいくつかあったり、ieのバージョンに合わせた書き分けしたりしていた時代が終わって本当に良かった。
COMMENT FORM