あんぷら屋 anpuraya

header_meta_summary

ヘッダーのメタ要素まとめ

記事更新日:2018-05-20

最初の記事になるからあんぷら屋でまとめる内容について先に1つだけ。
細かい・正確な情報は、qiitaとかそこら中にあふれているので基本割愛します。
どちらかといえば、いざ制作するときに見返すブックマークのような内容をまとめていく予定です。

2018-05-24 追記:ソーシャル関連のタグについて追記しました。

で最初はヘッダーについて。
ひと昔前と比べたら相当シンプルにわかりやすくなりました。
あんぷら屋のソースはこんな感じ。

<!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のバージョンに合わせた書き分けしたりしていた時代が終わって本当に良かった。

記事が増えてきたら、関連するページにも移動しやすくしたいけど、しばらくはトップに戻るだけの単一雑記ページが増えてく予定です。

knowledge

Web関連の小ネタ・まとめ。ちまちま増やしてく予定。
カテゴリ分けせずに、件数増えたらタグでまとめます。

Contact

Web拍手的なコメント投稿機能:


Copyright(c) 2005-2018 Hazumi Otoya / Anpuraya - All Rights Reserved.