Open6
HTML
hayato94087<meta http-equiv="X-UA-Compatible" content="IE=edge" />
IE のサポートが終了し、今後は無効化され使うことも出来なくなるため、互換性の確保などの懸念もなくなっている。そのため、この meta 要素の定義は必要ない。
hayato94087<meta name="format-detection" content="telephone=no" />
iPhoneのSafariには、文書内の電話番号を検出して自動的にリンクする機能が備わっています。（電話番号以外の番号もリンクされてしまう場合があります）
この自動リンク機能を無効にしたい場合は、name属性の値に format-detection、content属性の値に telephone=no を指定しておきます。
hayato94087<meta name="robots" content="max-image-preview:large">
画像のサムネイルが検索結果に表示されるスニペットがあります。
max-image-preview タグはスニペットに表示される画像のサイズを指定します。
[setting] には 3 種類の値のいずれかを使用します。
none: 画像をスニペットに表示しません
standard: デフォルトの大きさの画像をスニペットに表示します
large: viewport の幅に合わせて大きな画像を表示します
大きな画像をスニペットに表示させたければ次のように記述します。
hayato94087font
hayato94087<meta property="og:locale" content="ja_JP" />
「og:locale」とは、ページの内容が何の言葉で記述されているかを示すために用いるパラメーターで、Facebook側で適切に翻訳する際に使用されます。
hayato94087全般
<!doctype html>
<html lang="ja" dir="ltr">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="/css/style.css">
<!-- safari -->
<link rel="mask-icon" color="{{ カラーコード }}" href="/mask-icon.svg">
<!-- 一般的なタグ -->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="{{ 説明文 }}">
<meta name="keywords" content="{{ キーワード,キーワード }}">
<!-- 設定 -->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!-- SNS向け -->
<meta property="og:type" content="website">
<meta property="og:title" content="{{ タイトル }}">
<meta property="og:description" content="{{ 説明文 }}">
<meta property="og:url" content="{{ ページURL }}">
<meta property="og:image" content="{{ 絶対パス }}/img/ogp.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ twitter id }}">
<meta name="twitter:creator" content="@{{ twitter id }}">
<!-- アイコン関係 -->
<link rel="icon" type="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="{size}" href="/img/common/apple-touch-icon.png">
<!-- Windows -->
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Android -->
<meta name="theme-color" content="{{ color }}">
<link rel="canonical" href="{{ url }}">
</head>
<body>
なくても動くけどFacebookでfb:app_idが無いと怒られるよ。
必要なら発行して追記しましょう。
<script src="js/app.js"></script>
</body>
</html>