【コーディング】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">

OGP設定チェッカー

OGP確認:facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ🔧

過去の関連記事ページURL

公式ドキュメント情報などOGP設定に関する情報を別途まとめています。

【コピペ可】SNSでシェアできるようにするOGP設定タグ【コピペ可】SNSでシェアできるようにするOGP設定タグ

その他の設定に関するチェック項目

場合によっては必要になるタグの設定項目です。

  • キーワード(<meta name="keyword" content=""> )が設定されているか?
  • ブラウザバーの色(<meta name="theme-color" content=""> )が設定されているか?
  • カノニカルタグ(<link rel="canonical" href="">)が設定されているか?
  • 著作者、コピーライトの設定がされているか?
  • 記事作成日、更新日の設定がされているか?
  • 検索ロボット用の設定がされているか?(noindex設定など)

参考サイト

色々あるHTMLのmetaタグなど一覧