【コーディング】headタグの確認すべきチェック項目（SEO・SNSなど）

コーディング時にheadタグ内の設定を最適化しておきましょう。ページ情報を正確に設定して表示の不具合を防いだり、使い勝手の向上を図ることができます。また、内部対策としてのSEO上の効果が見込めたり、SNSでのページ拡散効果が高められます。

基本は設定しておいた方が良いチェック項目

言語設定（<html lang="ja">）がされているか？
文字コード（<meta charset="utf-8">）が設定されているか？
ビューポート設定（<meta name="viewport" content="width=device-width">）が正しくされているか？
タイトル（<title>タイトル</title>）が設定されているか？
ディスクリプション（<meta name="description" content="ディスクリプション"> ）が設定されているか？
ファビコン(favicon)、アプリアイコンの設定がされているか？
SNSシェア用のOGP設定がされているか？

ファビコン(favicon)、アプリアイコンの設定がされているか？

ファビコン設定用の雛形

<link rel="apple-touch-icon" sizes="180x180" href="ウェブクリップアイコン画像のパス">
<link rel="icon" type="image/png" sizes="32x32" href="ファビコン画像のパス">
<link rel="icon" type="image/png" sizes="16x16" href="ファビコン画像のパス">

ファビコン作成＆設定チェッカー

https://realfavicongenerator.net/

SNSシェア用のOGP設定がされているか？

OGP設定用スニペット

<meta property="og:title" content="タイトル">
<meta name="twitter:title" content="タイトル">
<meta property="og:description" content="ディスクリプション">
<meta name="twitter:description" content="ディスクリプション">
<meta property="og:image" content="画像URL">
<meta name="twitter:image" content="画像URL">
<meta property="og:image:secure_url" content="画像URL">
<meta property="og:url" content="サイトURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary">