HTMLメタタグとOGP・Twitter Cardの設定方法 — SEOとSNSシェア最適化
HTMLのメタタグはページのタイトル・説明・キーワードを検索エンジンに伝えると同時に、SNSでのシェア表示（OGP・Twitter Card）を制御します。適切に設定することで検索クリック率の向上とSNSでのリッチプレビューが実現できます。
基本的なメタタグ
<meta name="description">はGoogleの検索結果に表示される説明文で、推奨は120〜160文字です。<meta name="robots">はクローラーの動作を制御し、index・noindex・follow・nofollowなどを指定します。<meta charset="UTF-8">は文字コードの宣言で、<html lang="ja">とセットで必須です。<meta name="viewport">はモバイル対応に必要です。
OGP（Open Graph Protocol）タグ
OGPはFacebook・LINE・Slackなどでページをシェアしたときのカード表示を制御します。og:title（タイトル）・og:description（説明）・og:image（サムネイル）・og:url（正規URL）・og:type（コンテンツタイプ）が基本の4タグです。og:imageは1200×630pxのJPGかPNGを推奨し、ファイルサイズは1MB以下にします。
Twitter Card
Twitter（X）ではtwitter:card・twitter:title・twitter:description・twitter:imageを設定します。twitter:card は summary（小画像カード）・summary_large_image（大画像カード）・app・playerの4種類があります。Webサービスのシェアにはsummary_large_imageが効果的です。OGPタグと併用すると他のSNSにも対応できます。
Google検索プレビューの確認
Meta Tag GeneratorではGoogleの検索結果カード・OGPカード・Twitter Cardの3パターンのプレビューをリアルタイムで確認しながら設定できます。タイトルは60文字以内、descriptionは160文字以内の文字数ガイドも表示されるため、切れないコピーを設計できます。完成したタグはHTMLコードとして一括コピーできます。