リアルタイムなプレビューと文字数管理
ページタイトルやディスクリプション、画像URLを入力するだけで、検索エンジンやSNS上でどのように表示されるかをブラウザ上で瞬時にシミュレーションします。
Googleの検索結果において省略されずに表示される最適な文字数を自動でカウントし、上限を超えた場合は警告を表示するため、SEOに効果的なテキスト調整が可能です。すべての処理はお使いのデバイス上で行われ、入力データが外部サーバーに送信されることはありません。
SNSシェアに欠かせないOGPタグを網羅
X(旧Twitter)やFacebookなどのSNSでリンクがシェアされた際、魅力的なカードとして表示させるためのOpen Graph(OGP)タグを自動生成します。
画像の幅や高さの指定タグも同時に出力されるため、プラットフォーム側での意図しないトリミングを防ぎやすくなります。ただし、最終的なカードの表示比率やレイアウトは各SNSの仕様に依存するため、推奨されるアスペクト比(一般的に1.91:1、1200×630ピクセル)の画像を用意することをおすすめします。
タグの設置方法と注意点
生成されたコードをコピーし、対象となるHTMLファイルの<head>タグ内に貼り付けるだけで実装が完了します。当ツールは、静的なHTMLへの記述を前提として最適化されたコードを出力します。
JavaScript(ReactやVueなどのSPA)を使用してページ読み込み後にメタタグを動的に挿入・変更する場合、一部のSNSクローラーがタグを正しく認識できず、デフォルトのカードが表示されてしまうことがあります。確実なシェア表示を狙う場合は、サーバーサイドレンダリング(SSR)などを活用して初期HTMLにタグを含めるようにしてください。
よくある質問
画像をすべてのプラットフォームで正しく表示させるにはどうすればよいですか?
1200×630ピクセル(アスペクト比1.91:1)の画像を使用するのが最も確実です。各SNSによってトリミングの仕様が異なるため、重要なテキストや被写体は画像の中央に配置することをおすすめします。
タイトルやディスクリプションが推奨文字数を超えた場合はどうなりますか?
検索結果やSNSのタイムライン上で、テキストの末尾が省略されて表示されます。ユーザーに伝えたい重要なキーワードやメッセージは、できるだけ文章の前半に配置するようにしてください。
生成されたタグはHTMLのどこに配置すればよいですか?
HTMLドキュメント内の<code><head></code>と<code></head></code>の間に貼り付けてください。文字化けを防ぐため、文字コードの指定タグよりも後に配置するのが一般的です。
SNSプラットフォームは必ずこのタグの通りに表示しますか?
必ずしもそうとは限りません。各プラットフォームの仕様変更やキャッシュの状態により、タグが無視されたり古い情報が表示されたりする場合があります。設定後は各公式のデバッガーを利用して実際の表示を確認してください。
入力したサイト情報や画像URLが保存されることはありますか?
いいえ、一切保存されません。当ツールはすべてお使いのブラウザ上で動作しているため、入力したテキストやURLが外部のサーバーへ送信されることはありません。
ツールの不具合や改善案はありますか。 フィードバックを送る