個性を活かそう!センスを伸ばそう!BECK Inc. 公式ブログサイト
  • BECK ブログ
  商売・仕事  

SNSでシェアするときの「アイキャッチ画像」に注意しよう!

こんにちは。BECKのDX (デラックス) です。

ブログを書いている人は非常に多いなか、最近では有料、無料問わず、CMS (Content Management System)も様々なものがありますね。


この記事を書いた人
DX | BECK 代表



よくみんなが使ってる (使いやすい) ものだと、AmebaやJIMDOなどがありますね。

ただ、URLなどが独自で組めない点など、まぁ、気にならない方はいいんでしょうが、ボクは結構気になります。
特に、業種や商売によっては、URLって結構大事だと思うんです。(色んな意味でw 以下、略)

 

うちのイッツ・商タイム!は、WordPressでサイトを作り、プラグインなど、カスタマイズしオリジナルとして運用しています。

 

さてさて、今日の本題ですが、CMSを使ってブログサイトなどを運用している方も、そうでない方も注意していただきこととして、

 

SNSでシェアしたときの画像

 

についてのお話です。

 

インターネットの記事や、ご自身のブログ、ホームページなどをSNS (Facebook、LINE、メッセンジャーなど) でシェアしたとき、ちゃんと意図した画像って出てますか?

 

 

要はこんな感じでちゃんと画像が出るかどうか?ということ。

 

アイキャッチ画像にてOGPイメージを設定していれば、アイキャッチ画像として意図した画像が出るのですが、

ホームページに「OGP」を設定していない場合、body直下の最初の画像が出たり、意味不明な画像やテキストが抜粋されてしまいます。

あと、画像が出ない。(出てない) なんてことも、よく目にします。

 

これは結論から言うと、非常に勿体無いですし、クリックが取れませんし、リアクションしてもらいにくいです。

 

ちなみに、ダメな例は・・・

 

 

おわかりいただけますでしょうか?

 

先程のプレビュー画面と比べ、アイキャッチ画像が表示されていません。

これではSNSで拡散しても、内容がわかりづらく、クリックやタップしてもらいにくいです。

 

そんなお困りの方へ、今日はその方法を解説いたします。

 

 

ホームページやサイトにてOGPイメージを設定する場合

 

<meta property=”og:image” content=“○○画像URL” />

 

上記をコピペし、サイトの<head>〜</head>の中に挿入します。

 

スマホデバイスのことも考え、最適なOGPイメージのサイズは、1200×630が良いです。

 

 

ちゃんとOGPイメージ、ブログのアイキャッチ画像が出るか確認する

 

ブラウザから「フェイスブック デバッガー」にアクセスします。

 

アクセスすると上記のような画面が表示されます。SNSでシェアしたい記事やURLを貼り付け、「デバッグ」をクリック。

 

 

 

するとこのように貼り付けたURLのスクレイピング詳細が表示されます。

一度もSNSでシェアしたことの無いURLにて確認デバッグする際や、画像、詳細が表示されない場合は、「もう一度スクレイピング」をクリックして再度実行します。

 

なお、WordPressのテーマによっては、アイキャッチ画像が挿入できないテーマなどもありますので、お使いのテーマを確認していただき、もし挿入できない場合は、プラグインをダウンロードする必要があります。

 

いかがでしたでしょうか?

 

SNSで記事やコンテンツをシェアする際、関連したファーストビュー画像があるか無いかで随分変わってくるので、ぜひチャレンジしてみてください。

 

 

ではまた!

 

BECK 魅せるWeb

https://www.beck-dx.com

BECKに「いいね!」して
最新情報をチェックしよう!



 

\ この記事が面白かったらシェアしよう! /



The following two tabs change content below.
アバター
「個性を活かそう」「センスを伸ばそう」 BECKは三重県桑名市でWeb制作、EC顧問業などを行う企業です。 ファッションと歌うことが大好き。