サイトマップ

Facebookのタイムラインシェア時に画像を綺麗に見せる方法|SOS110番

検索
ログイン

Facebookへウェブサイトをシェアした時に画像を綺麗に見せる方法

Facebookへウェブサイトをシェアした時に画像を綺麗に見せる方法
関連キーワード: ホームページ 自分で更新
Facebookにウェブサイトをシェアする際に表示される画像・タイトル・テキスト。。。
特に画像が意図していないものが表示されることはありませんか?

これらはOGP設定をすることで制御することができます

OGP設定方法や併せて使えるツールをご紹介します。

OPG設定とは

OGPとは”Open Graph Protocol”の略で、

Facebookやgoogle+などSNSとウェブページを連携させる為の仕様です。

 

導入方法は下記メタタグを追記するだけです。

 

<meta property="og:title" content="パソコントラブル、ネット炎上などPC周りの困りごと解決とお役立ち情報|SOS110番" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://sos110.jpn.com/" />
<meta property="og:image" content="http://sos110.jpn.com/hoge.jpg" />
<meta property="og:site_name" content="SOS110番" />
<meta property="og:description" content="パソコントラブル、ネット炎上などPC周りの『困った・・!!』を解決するためのノウハウやツール、運用・活用するための最新トレンド情報などを、専門的な知識を持ったライターによる記事でお届けする情報メディアです。" />

OGP設定項目

og:title、og:description、og:urlはmeta設定がされている場合、ogpに自動的に反映されます。

og:imageが設定されていない場合、ウェブサイト上の画像の中から自動で選択されます。

og:title ウェブサイトの名前
og:type ウェブサイトの種類
og:url ウェブサイトのURL
og:image ウェブサイトのサムネイル画像
og:site_name ウェブサイト名
og:description ウェブサイトの説明文
og:email 連絡先
og:locality 場所

Facebook Debugger

Facebook DebuggerではOGPの設定情報が確認できるツールです。

OGP設定後、キャッシュの問題ですぐ反映されない場合に、

キャッシュをクリアすることも可能です。

 

Facebook Debugger

debugger

Debuggerのページへアクセスし、URLをはりつけDebugボタンをクリックします。

debugger

googleで試してみました。

googleのOGP設定が確認できます。

debugger

Fwtch new scrape informationをクリックすることでキャッシュがクリアされます。

OGP画像シミュレータ

OGP画像の最適なサイズは1200 x 630 px 以上を推奨しています。

OGP画像シミュレータでは、画像をドラッグ&ドロップするだけで、

実際のシェア時の見た目が表示されます。

OGP用画像作成時のチェックにいかがでしょうか。

 

OGP画像シミュレータ

OGP画像シミュレータ
お気に入りに追加

チャーハン

WEB制作会社でコーダーを務める。

このカテゴリ注目のキーワード

あなたにおススメの記事

この記事へのコメント

コメント(0)

利用規約に違反するコメントを確認された場合はご報告ください

ログインしてコメントを書く
まだコメントはありません。

このカテゴリの新着記事

今すぐどうにかしたい方へおススメ
パソコンが重すぎて仕事にならない今すぐ何とかしたい!誹謗中傷検索順位がズドンと落ちた!
アクセス数ランキング
  • ALL
  • PCトラブル
  • ネットトラブル
  • パソコンスキル
  • ホームページ
コメント数ランキング
  • ALL
  • PCトラブル
  • ネットトラブル
  • パソコンスキル
  • ホームページ
パソコントラブル解決マルウェア対策ネットトラブル解決誹謗中傷対策パソコンのスキルアップ楽しみ方・活用法ホームページWEB活用ノウハウ
pagetop