Facebookへウェブサイトをシェアした時に画像を綺麗に見せる方法
ホームページ
2015.11.30
特に画像が意図していないものが表示されることはありませんか?
これらは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
Debuggerのページへアクセスし、URLをはりつけDebugボタンをクリックします。
googleで試してみました。
googleのOGP設定が確認できます。
Fwtch new scrape informationをクリックすることでキャッシュがクリアされます。
OGP画像シミュレータ
OGP画像の最適なサイズは1200 x 630 px 以上を推奨しています。
OGP画像シミュレータでは、画像をドラッグ&ドロップするだけで、
実際のシェア時の見た目が表示されます。
OGP用画像作成時のチェックにいかがでしょうか。
WEB制作会社でコーダーを務める。
あなたにおススメの記事
このカテゴリの新着記事
- ALL
- PCトラブル
- ネットトラブル
- パソコンスキル
- ホームページ
-
No.1
PCトラブル
2015.09.29
-
No.2
PCトラブル
2016.02.03
-
No.3
PCトラブル
2015.08.21
-
No.4
PCトラブル
2015.09.29
-
No.5
ホームページ
2015.12.03
-
No.1
PCトラブル
2015.09.29
-
No.2
PCトラブル
2016.02.03
-
No.3
PCトラブル
2015.08.21
-
No.4
PCトラブル
2015.09.29
-
No.5
PCトラブル
2015.09.29
-
No.1
ネットトラブル
2015.10.03
-
No.2
ネットトラブル
2015.10.03
-
No.3
ネットトラブル
2015.10.03
-
No.4
ネットトラブル
2015.10.03
-
No.5
ネットトラブル
2015.10.03
-
No.1
ホームページ
2015.12.03
-
No.2
ホームページ
2015.12.01
-
No.3
ホームページ
2016.01.17
-
No.4
ホームページ
2015.12.06
-
No.5
ホームページ
2016.01.11
- ALL
- PCトラブル
- ネットトラブル
- パソコンスキル
- ホームページ
-
No.1
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.2
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.3
PCトラブル
2015.09.29
★ 1
コメント(1)
-
No.4
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.5
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.1
PCトラブル
2015.09.29
★ 1
コメント(1)
-
No.2
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.3
PCトラブル
2016.10.11
★ 0
コメント(0)
-
No.4
PCトラブル
2016.10.01
★ 0
コメント(0)
-
No.5
PCトラブル
2016.10.01
★ 0
コメント(0)
-
No.1
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.2
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.3
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.4
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.5
ネットトラブル
2015.10.03
★ 0
コメント(0)
-
No.1
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.2
ホームページ
2015.10.05
★ 0
コメント(1)
-
No.3
ホームページ
2016.03.20
★ 0
コメント(0)
-
No.4
ホームページ
2016.02.20
★ 0
コメント(0)
-
No.5
ホームページ
2016.02.12
★ 0
コメント(0)
この記事へのコメント
コメント(0)
※利用規約に違反するコメントを確認された場合はご報告ください