WEBマスターの手帳 > WEBサイト作成 > jimdo > たったの3ステップ!JimdoでFacebookがシェアされた時の画像を指定する方法。

jimdo

2015年11月21日

たったの3ステップ!JimdoでFacebookがシェアされた時の画像を指定する方法。

Twitter 2 Facebook 1 Google+1 はてブ 2 Pocket チャットワーク Eight Feedly

Jimdoでホームページを作っていく際に「Facebook」や「Twitter」でホームページがシェアされた時に表示されるタイトルや説明文、画像などを事前に設定しておく必要があります。

特にこれを設定していないために、誰かがFacebookなどでシェアしてくれた時に内容に合っていない画像が表示されてしまうということが起こります。

今回は、Jimdoで作ったホームページでの、ホームページがFacebookでシェアされた時に表示されるページタイトルや説明文、画像の設定(これをOGPと言います)方法をご紹介します。

スポンサードリンク

ステップ1:設定用のソースコードをコピーして貼り付ける

まずは以下のソースコードをコピーしてください。

<meta property="og:type" content="ページの種類">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="記事の説明" />
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="表示したい画像のURL">

「ヘッダー部分を編集」を開いて貼り付ける

コピーしたソースコードを「ヘッダー部分」に貼り付けます。貼り付けるには、まず「設定」→「ヘッダー部分を編集」をクリックして、編集画面を開きます。

ヘッダー部分を編集を開く

その後「<head>の変更」という項目内にコピーしたソースコードを貼り付けます。

Jimdoでfacebookのogpを設定するためにヘッダー部分にソースコードを貼り付ける

ステップ2:ソースコードの内容を自分のホームページに合わせる

ヘッダー部分にソースコードを貼り付けたら、ソースコードの内容を自分のホームページに合わせて変更します。変更する箇所は以下の緑色の部分です。それぞれ、自分のホームページに合わせて変更をしてください。

Image

ページの種類は何を選んだら良い?

この中で、わかりづらいのが「ページの種類」です。ページの種類にはいくつか種類がありますが、一般的なホームページで必要となるのは以下の3つです。

  • website(ホームページのトップページ)
  • blog(ブログサイトの場合)
  • article(トップページ以外の個別ページやブログ記事)

Jimdoの場合は「ホームページ全体」ではwebsite、「個別ページもしくはブログ記事」ではarticleを選択してください。

表示したい画像のURLの取得方法

次に「表示したい画像のURL」はどうやって知るのか(取得するのか)についても解説しておきます。取得するにはページに挿入している画像を右クリックします。

右クリックすると「画像のURLをコピー」という選択肢があるので、クリックしてコピーします。あとはコピーしたURLを「表示したい画像のURL」の部分にペースト(貼り付け)すればOKです!

※右クリックして「画像のURL」をコピーする際は、Jimdoをプレビューモードにしてください。

Jimdoで画像のurlを取得する方法

ステップ3:正しく設定できているかを確認する

ソースコードの変更が済んだら、正しく設定できているかを確認します。確認するためにFacebookが用意している専用ページ(https://developers.facebook.com/tools/debug/)を開きます。

専用ページが開いたら、確認したいページ(トップページ、個別ページ、ブログ記事)のURLを貼り付けて「Debug」という青いボタンをクリックします。

エラー表示(赤)がなければ完了

「Debug」ボタンを押すと、ホームページがFacebookでシェアされた時に表示されるページタイトルや説明文、画像の設定のチェック結果が表示されます。

次のように「青」で表示されていれば問題ありません。ここで「赤」で何か表示がある場合はエラーがあるので、ソースコードを見直してください。

Image  1

画面の下では、実際にシェアされた時の表示プレビューも確認することができます。

Image  2

これでホームページがFacebookでシェアされた時に表示されるページタイトルや説明文、画像の設定の設定は完了です。

自分のホームページやブログ記事が、Facebookでシェアされた時に関係のない画像が表示されることが内容にしましょう。またページタイトルもFacebookに合わせて設定しておくことをお勧めします。

この記事をシェアして頂けると嬉しいです

Pocket

この記事に対するあなたの評価をお教え下さい

星印をクリックして5段階評価で、この記事に対する、あなたの評価をお教え下さい。

ヒドイイマイチ普通良い凄く良い
Loading...

Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

友だち追加

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

ピックアップ記事一覧

カテゴリー

テックアカデミー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事