OGP情報確認・シミュレーションツール

URLまたはHTMLソースコードからOGP情報の取得、設定診断、SNS投稿時のイメージを表示します。 X(旧Twitter)、Facebook、LINEなどに対応し、画像ファイルからのシミューレーションも可能です。
安全
検証結果は記録されず、どこにも公開もされません。

解説

OGPタグの設定状況の検証や、SNS投稿時の表示をシミューレーションするツールです。
OGイメージ画像の作成時や、HTMLタグのテストに役立つ機能を備えています。

入力ソース

3つの方法から選択できます。

サイトURL既に公開されているサイトに適しています。
HTMLソースコード開発段階やアクセス制限のあるサイトの検証に適しています。
画像ファイルOGP画像制作時のイメージチェックに適しています。

診断結果

3つのグレードで評価します。

評価A推奨条件を満たしています。
評価B必須条件は満たしていますが、推奨項目があります。
評価C修正が必要な項目があります。

推奨設定例

下記の指定だけで主要SNSをカバーできます。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページ説明">
<meta property="og:url" content="ページURL">
<meta property="og:image" content="OGP画像のURL">
<meta property="og:type" content="ページの種類">
<meta property="og:site_name" content="サイト名称">
<meta name="twitter:card" content="Twitterカードの種別">

基本OGPタグ

各SNS共通で利用できるタグです。下記は全て設定することが推奨されます。
属性にはpropertyを使用します。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページ説明">
<meta property="og:url" content="ページURL">
<meta property="og:image" content="OGP画像のURL">
<meta property="og:type" content="ページの種類">
<meta property="og:site_name" content="サイト名称">

og:title

ページのタイトルを設定します。通常はtitleタグと同じ値を指定します。
Twitterではこの指定がない場合、Twitterカード自体が無効になるため、実質必須となります。

<meta property="og:title" content="ページタイトル">

設定例

<meta property="og:title" content="OGP情報確認・シミュレーションツール">

og:description

ページの説明を設定します。通常はdescriptionタグと同じ値を指定します。
ほとんどのSNSにおいて、こちらを省略した場合は代わりにdescriptionが参照されます。

<meta property="og:description" content="ページ説明">

設定例

<meta property="og:description" content="URLまたはHTMLソースコードからOGP情報の設定診断とSNS投稿時のイメージを表示します。Twitter、Facebook、LINEなどに対応し、画像ファイルからのシミューレーションも可能です。">

og:url

対象ページのURLを絶対パスで設定します。

<meta property="og:url" content="ページURL">

設定例

<meta property="og:url" content="https://develop.tools/ogp-simulator/">

og:image

OGP画像のURLを絶対パスで設定します。推奨サイズは1200px×630pxです。
1:1で表示される場合があるため、必要情報は中心の630px×630pxに収めるようにします。

<meta property="og:image" content="OGP画像のURL">

設定例

<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">

og:type

対象ページの種類を指定します。

websiteWebサイトのトップページ
article記事ページなど、トップ以外のページ
blogブログなどのトップページ
product製品やサービスの詳細ページなど
<meta property="og:type" content="ページの種類">

設定例

<meta property="og:type" content="article">

og:site_name

Webサイト名称を指定します。基本的には全ページ共通となります。

<meta property="og:site_name" content="サイト名称">

設定例

<meta property="og:site_name" content="develop.tools">

X(旧Twitter)専用タグ

X(旧Twitter)で優先して利用されるタグです。
基本OGPタグが指定されている場合は全て省略しても問題ありません。
サムネイルのサイズを指定したい場合だけtwitter:cardを設定します。

属性にはnameを使用します。

<meta name="twitter:card" content="Twitterカードの種別">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="ページ説明">
<meta name="twitter:image" content="サムネ画像のURL">
<meta name="twitter:site" content="サイトのTwitterユーザー名">
<meta name="twitter:creator" content="作者のTwitterユーザー名">

twitter:card

Twitterカードの種類を設定します。大きなサムネイルで表示したい場合は指定します。
省略した場合はsummaryとなります。

summary小さなサムネ(正方形表示)とサイト情報の横並び表示
summary_large_image大きなサムネとサイト情報の上下表示
<meta name="twitter:card" content="Twitterカードの種別">

設定例

<meta name="twitter:card" content="summary_large_image">

Facebook

Facebookで利用されるタグです。
Facebook独自の計測機能を利用したい場合は指定します。

<meta property="fb:app_id" content="FacebookアプリID">

関連ツール