<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<!-- meta情報 -->
<title>ページタイトル</title>
<meta name="description" content="サイトの概要文が入ります">
<!-- ogp -->
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com//">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="サイトの概要文が入ります">
<!-- twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitterユーザ名" />
<meta name="twitter:description" content="サイトの概要文が入ります" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:image" content="https://example.com/ogp.jpg" />
<!-- コンテンツの重複を防ぐ -->
<link rel="canonical" href="https://example.com/">
<!-- icon -->
<link rel="icon" href="/path/to/favicon.ico"> <!-- rootにおいている場合は記述不要 -->
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png">
<!-- CSS -->
<link rel="stylesheet" href="/path/to/style.css">
<!-- JavaScript -->
<script defer src="/path/to/script.js"></script>
</head>電話番号、メールアドレス、住所の自動リンクを防ぐ
<meta name="format-detection" content="telephone=no,address=no,email=no">iPhoneなどの一部のブラウザは電話番号やメールアドレス、住所を自動でリンクにしてしまうことがあります。
リンクにしたくない場合上記のコードの記述が必要です。
リンクにする場合はtel:やmailto:などをつけてあげることで可能になります。
OGPの設定
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com//">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="サイトの概要文が入ります">OGP画像はX(twitter)やfacebookなどでシェアされた時の画像設定になります。
推奨サイズは1200px × 630pxとされています。
URLは、https:// から始まる絶対パスで記述します。
その他にもタイトルや概要分、サイトURLなども設定可能なので設定しておくとシェアされた時の見栄えもよくなると思います。
コンテンツの重複を防ぐ
<link rel="canonical" href="https://example.com/">例えば、https://example.com/とhttps://example.com/index.htmlは同じページのことを指します。
しかし、同じページにも関わらず検索エンジンは別々のページとして認識してしまいます。
その為、どちらかを正規のページですよ！と定義しないといけないのですが、上記のコードを記述することで正規ページを設定することができコンテンツの重複を防ぐことができます。
scriptタグの読み込み
<script defer src="/path/to/script.js"></script>scriptタグにdefar属性を付与することで、headタグ内に記述することができbodyタグの閉じタグ直前に置かなくてもよくなります。
今まではheadタグにscriptタグを記述してしまうと、HTMLの読み込みをしないままscriptタグ内に記述しているコードを読み取ってしまうのでDOM操作の記述をしていると必ずエラーが起きてしまいます。
このdefar属性はheadタグにscriptタグを置いていてもHTMLの読み込みが終わってからscriptタグを読み込んでくれます。
まとめ
いかがだったでしょうか？もっと他にも数多くの種類があると思いますが、最低限これは入れといた方がいいものをご紹介しました。
最後までご覧いただき、ありがとうございます。
ご不明点やご相談、お仕事の依頼はいつでもお気軽にご連絡ください。
コメント