OGP・メタタグ生成 <head>

ページの情報を入れると、検索結果とSNSシェア用のタグ一式を作ります。入力した文字は自動でHTMLエスケープされます。

基本
全角換算 0字
全角換算 0字
OGP / X
詳細

<head> に貼るタグ


      

      
    

      
    
        
    プレビュー（見た目の目安）
    
        
    検索結果風
    
        
    S
    
          
    
        
    SNSカード風
    
        
    
      
    
    
    
  
    

  
    
    
    文字数は全角を1、半角英数を0.5として数えた目安です。検索結果での省略は文字数ではなく表示幅で決まり、タイトル全角30字前後・説明文全角80〜120字前後がよく使われる目安です（スマホでは短めに切れやすくなります）。
    
    
    タグの仕様は The Open Graph protocol（ogp.me）と X（旧Twitter）のカードの説明に沿っています。検索結果のタイトルや説明文は検索エンジン側で書き換えられることがあります。プレビューは画像を読み込まず、枠だけを表示します。入力内容は送信も保存もしません。
    
  
    

    


    OGP・メタタグ生成でできること
    ページのタイトルや説明文、URL、OGP画像などを入れると、HTMLの<head>に貼るメタタグとOGP・Xカード用のタグをまとめて作ります。ブログや個人サイトを公開する前の設定確認に使えます。
    使い方
    1. 「基本」にページのタイトル、説明文、ページのURLを入れます。canonical は空欄ならページのURLが使われます。
    2. 「OGP / X」でOGP画像のURL、サイト名、type、Xカードの種類、必要ならXのユーザー名を選びます。
    3. 「詳細」で robots、lang、theme-color を選び、charset と viewport を含めるかを決めます。
    4. タイトルと説明文の下の文字数メーターと、検索結果風・SNSカード風のプレビューで見え方を確認します。
    5. 「<head> に貼るタグ」のコピーを押し、ページの<head>内に貼り付けます。
    計算の仕組みと注意点
    よくある質問
    OGP画像のサイズはどれくらいがいいですか？
    大きい画像のカード（summary_large_image）では 1200×630px（約1.91:1）がよく使われます。og:image は https:// から始まる完全なURLで書く必要があり、相対パスだと注意が表示されます。
    meta description は何文字くらいにすればいいですか？
    全角80〜120字前後がよく使われる目安です。説明文の下のメーターで全角換算の文字数と、目安より短い・長いかを確認できます。
    summary と summary_large_image の違いは？
    summary は小さい正方形の画像、summary_large_image は横長の大きい画像でカードが表示されます。「Xカードの種類」を切り替えると、SNSカード風プレビューの形が変わります。
    検索結果に出したくないページはどう設定しますか？
    robots で「noindex, follow」などを選ぶと <meta name="robots"> が出力されます。反映までには時間がかかることがあるので、各検索エンジンの公式ヘルプも確認してください。