108.works

Tool

メタタグ生成

ページのタイトルと説明を入れると、OGP と Twitter Card 用のタグができます。プレビューを見ながらコピーできます。

Facebook 風

画像なし

example.com

X 風

画像なし

example.com

できた HTML

 
このブラウザの中で作っています。サーバーには送りません。
 
 
 
使い方
 
     
  • タイトルと説明を入れて、プレビューを確認します。
    •  
  • できた HTML をコピーし、ページの <head> に貼ります。
    •  
  • 画像は公開 URL を指定してください（相対パスだと SNS 側で読めません）。
    •  
 
 
 
 
 
 
 
 どんなときに使うか 
  
 
  
     
  • 新しいページの title / description / OGP をまとめて用意したいとき
    •  
  • SNS でどう見えるか、貼る前にだいたい確認したいとき
    •  
  • 既存ページのメタを書き直す下書きを作りたいとき
    •  
 

実際の Facebook / X の表示はキャッシュや仕様で変わることがあります。最終確認は各サービスのデバッガも併用してください。

  
 
 
 
 
 
 
 タイトル・説明の決め方 
  
 
  

このツールは、タイトル 30〜60 字・説明 70〜120 字を目安にしています。
      日本語は英文字より早く検索結果で切られるため、タイトルは範囲の下半分（30〜40 字前後）に収まると安全です。

 
     
  •  タイトル
… このページが何で、誰向けかを一言で。重要な言葉を前に置きます。例: 「お問い合わせフォームのスパムを減らす | サイト名」

    •  
  •  説明
… このページで何を知れるか、問題がどう解決するかを予告します。謳い文句ではなく、読み手への答えの予告にします

    •  
 

検索結果で表示されるのはタイトルと説明の 2 行だけです。ページの中身と一致していても、ここが薄いままではクリックされません。

  
 
 
 
 
 
 
 出るタグの役割 
  
 
  
  
タグどこで効く
   
title / meta descriptionGoogle などの検索結果。クリックの入口
 
og:title / og:description / og:imageSNS（Facebook・LINE など）で共有されたときのカード表示
 
canonical / og:urlページの正規 URL を示す。このツールの「ページ URL」が両方に使われます
 
og:type一般ページは website、記事は article
 
twitter:cardX の共有カード。大きい画像は summary_large_image、小さい画像は summary
 
og:locale表示言語（ja_JP など）
  
  
 
 
 
 
 
 
 よくある質問 
  
 
  
入力した内容がサーバーに送られますか？
 
いいえ。タグの生成はブラウザ内だけです。例外として、画像 URL を入れたプレビューでは、その URL の画像を読みに行くため、画像の読み込みは行われます。
 
画像は相対パスで指定できますか？
 
できません。SNS 側が画像を取得するため、https:// から始まる公開 URL が必要です。相対パスだとプレビューと実表示の両方で読まれなくなります。
 
画像のサイズは何がよいですか？
 
1200×630px 前後が無難です。大きすぎると遅く、小さすぎると粗くなります。
 
ページにメタタグが既にあります
 
同名のタグは新しい方が効く（上書きになる）ことが多いですが、古いタグも残ったままになることがあります。貼り付ける前に、既存の title / description / OGP を一度外してから貼ることをおすすめします。
 
このプレビューだけで確認は十分ですか？
 
だいたいは見えますが、各 SNS はキャッシュや独自の仕様で表示が変わることがあります。公開前・公開直後は Facebook の共有デバッガや X のカードバリデータで最終確認してください。