HedgieTools

SNSシェアプレビュー

Google、Facebook、X、LinkedIn、WhatsApp、Slack、Discord、Pinterestでページをシェアしたときの見え方を確認し、切れてしまう部分を直して、そのまま貼り付けられるOpen Graphタグをコピーできます。

1. ページの情報

フォームに入力するか、ページのコードから読み込んでください。

0 / 60
0 / 155
ページの種類
シェア画像

JPG、PNG、WebP、GIF。選んだ画像はプレビューにのみ使われます。コード用に、オンライン上のアドレスも入力してください。

2. プレビュー

各プラットフォームの表示を再現したものです。実際の表示とは多少異なる場合がありますが、切れる位置はほぼ実際どおりです。

Google

Eexample.comhttps://example.com › …
ページタイトルここにページの説明が表示されます。

Facebook

example.comページタイトルここにページの説明が表示されます。

X

ページタイトル
example.comから

LinkedIn

ページタイトルexample.com

WhatsApp

ページタイトルここにページの説明が表示されます。example.com
https://example.com10:24

Slack

example.comページタイトルここにページの説明が表示されます。

Discord

example.comページタイトルここにページの説明が表示されます。

Pinterest

ページタイトルEexample.com

Pinterestでは画像がトリミングされず、全体が表示されます。縦長の画像（2:3、例：1000×1500px）はPinterestでは大きく表示されますが、他のサービスではトリミングされます。

3. チェックとコード

修正すべき点と、ページに貼り付けるタグです。

  • 問題タイトルなしタイトルがないと、各SNSがページから勝手にタイトルを作ってしまいます。
  • 問題説明なしSNSがページ内の文章を勝手に抜き出しますが、適切でないことがよくあります。
  • 問題画像なし画像のないリンクは、クリック数が大きく減ります。1200×630pxの画像を用意しましょう。
  • 改善点ページのアドレスなしog:urlはページの正式なアドレスを示すため、シェアが1つにまとめられます。

ページのheadセクションに貼り付けてください。

フォームに入力すると、コードが生成されます。

SNSシェアプレビューについて

ページがシェアされるたびに、SNSはタイトル、説明、画像を載せたカードを表示します。このツールでは公開前にそのカードを確認でき、カードの元になるタグも作成します。

リンクを魅力的に見せる

ページがシェアされると、各SNSはタイトル、説明、画像を載せたカードを表示します。これらの情報は、ページのコードに記述されたOpen Graphタグから取得されます。タグがないと、カードは空になるか、不適切な内容になります。

適切な長さ

Googleはタイトルを約60文字、説明を約155文字で切ります。1200×630ピクセル（1.91:1）の画像なら、どこでもきれいに表示されます。トリミングするプラットフォームもあるので、重要な部分は中央に置きましょう。Pinterestでは縦長の画像が好まれます。

そのまま貼り付けられるコード

ページのheadに配置するHTMLタグ、またはNext.jsサイト用のmetadataオブジェクトをコピーできます。公開後も、SNSが古いプレビューを数日間キャッシュに残すことがあります。

何もアップロードされません

プレビューはブラウザ内で再現されます。画像やテキストはどこにも送信されません。唯一の通信は、入力した画像アドレスへのリクエストで、ブラウザが行います。

関連ツール

開発

JWTデコーダー

JWTのヘッダー、ペイロード、日時を読み取り、署名を検証します。

ユーティリティ

QRコード作成

QRコードを作成してダウンロードします。