日頃より株式会社SMO南小国のホームページをご覧いただき、誠にありがとうございます。
この度、当社公式HPにて、WebページがX（旧Twitter）やFacebook、LINEでシェアされた際の表示（OGP画像・タイトル・説明文など）をリアルタイムに確認でき、設定に必要なHTMLのMetaタグを自動生成するオリジナルツール「OGP Previewer」を公開いたしました。
「自社サイトのリンクがSNSでどう表示されるか事前にチェックしたい」「画像が見切れないか確認したい」「エンジニアに渡すためのOGP設定コードを簡単に作りたい」といった、Web担当者やマーケティング、広報の方々に役立つツールです。
◼︎ OGP Previewerの主な特徴
- 主要SNSの表示をリアルタイムプレビュー
タイトルや説明文、OGP画像を入力するだけで、X（旧Twitter）、Facebook、LINEの3つのプラットフォームにおける表示カードを即座にシミュレートして確認できます。 - X（Twitter）のカードタイプ切替に対応
Xの表示形式としてよく使われる「Summary Large Image（大型）」と「Summary（小型）」の両方の見え方をワンクリックで切り替えてテストできます。 - HTML Metaタグの自動生成・ワンクリックコピー
プレビューで確認した内容を元に、Webサイトにそのまま貼り付けられる最適化されたHTMLのMetaタグ（OGPタグ、Twitterカードタグなど）を自動生成。ボタン一つでコードをコピーできます。
｜基本的な使い方｜
【1】ページの情報を入力する
画面左側の「設定項目」パネルに、以下の情報を入力します。
- ページURL：シェアされるページのURL
- タイトル (og:title)：記事やページのタイトル
- 説明文 (og:description)：ページの概要やアピールポイント
- サイト名 (og:site_name)：Webサイトの名前（任意）
- OGP画像 (og:image)：画像のURLを入力するか、「画像を選択」からお手元のPC内の画像をアップロードして設定できます。
- X (Twitter) カードタイプ：大型（Large Image）か小型（Summary）を選択します。
【2】プレビューを確認・調整する
画面右側のパネルで、各SNSでの見え方を確認します。
- X (Twitter) タブ：タイムライン上でのカード表示を確認します。
- Facebook タブ：ニュースフィードでの表示を確認します。
- LINE タブ：トークルームでのリッチリンク表示を確認します。
※入力した内容はリアルタイムでプレビューに反映されるため、文字の切れ具合や画像のバランスを見ながら微調整が可能です。
【3】Metaタグコードをコピーする
- プレビューパネルの「Metaタグ生成」タブを開きます。
- 表示されたコード右上の「コードをコピー」ボタンをクリックします。
- ご自身のWebサイトのHTMLの
<head>〜</head>内に貼り付けてご使用ください。