URLを入力すると、OGPメタタグを取得し、SNSでのシェア時の表示をプレビューします。
タイトルを入力するとプレビューが表示されます
OGPメタタグ生成でできること
OGPメタタグの内容を入力し、SNSでシェアされた際の表示をリアルタイムでプレビューできるツールです。タイトル・説明・画像URL・og:type・twitter:cardを設定すると、カード型のプレビューと、コピー可能なHTMLメタタグが自動生成されます。
使い方
- タイトル入力欄
- og:titleに設定するページタイトルを入力します。入力するとプレビューが表示されます。
- 説明入力欄
- og:descriptionに設定するページの説明文を入力します。
- URL入力欄
- og:urlに設定するページURLを入力します。
- 画像URL入力欄
- og:imageに設定する画像のURLを入力します。http://またはhttps://で始まるURLが必要です。
- og:type選択
- website・article・productからページの種類を選択できます。
- twitter:card選択
- summary（小さい画像付き）またはsummary_large_image（大きい画像付き）からTwitterカードの表示形式を選択できます。
- プレビュー表示
- 入力内容に基づいたSNSシェア時のカード表示をリアルタイムで確認できます。twitter:cardの設定に応じてレイアウトが変わります。
- 生成タグ・コピーボタン
- 入力内容から自動生成されたOGP用HTMLメタタグが表示され、コピーボタンでクリップボードにコピーできます。
よくある質問
- このツールは無料ですか？
- はい、無料です。登録も不要です。
- データはサーバーに送信されますか？
- いいえ、すべての処理はブラウザ内で完結します。
- OGPとは何ですか？
- Open Graph Protocolの略で、WebページをSNS（X・Facebook等）でシェアしたときにタイトル・画像・説明文を正しく表示するためのHTMLメタタグの仕様です。
- 生成したOGPタグはどこに貼り付けますか？
- HTMLファイルの<head>タグ内に貼り付けます。WordPressなどのCMSではhead部分のテンプレートに追記します。
- og:imageには何を設定すればよいですか？
- SNSシェア時に表示されるサムネイル画像のURLを設定します。推奨サイズはXで1200×628px、正方形の場合は1:1比率です。