OGP情報確認・シミュレーションツール
- 安全
- 検証結果は記録されず、どこにも公開もされません。
解説
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
対象ページの種類を指定します。
| website | Webサイトのトップページ |
|---|---|
| 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">
