動画で学ぶ【SEO対策 入門講座】Google検索で上位表示するための基礎コース|Udemy

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

この記事は、最後の更新が【2016年2月27日】のため、記事の内容が古くなっている可能性があります。

最新の記事や関連記事をお探しの方は「サイト内検索」をしてみてください。

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に合わせて設定しておくことをお勧めします。