投稿記事をブログカードで表示させる場合はアイキャッチがサムネイルとして使われています。
ですが、ブログのトップページを他のサイトがリンクしてくれた時はどうなるのか？と思い調べてみました
当方のブログで試してみたところ、こうなりました
やはりサムネイル画像が表示されていません
一緒にサムネイルを表示させる方法を調べたので紹介します
この記事は
- トップページをブログカードで表示した時にサムネイル画像を表示させる方法
- トップページをブログカードで表示した時の説明文の設定方法
についての内容になっています
SEO SIMPLE PACKで設定するので、別のプラグインを使っている人は対象外です
ブログのトップページをブログカードで表示させる時のカスタマイズ方法
SWELLで推奨されているSEO SIMPLE PACのプラグインを使っての設定になります。
SWELL独自での設定はありません
設定する画像（“og:image”の画像）を作っておく
私はいつもCanva Proを使って作っています
無料版でも簡単に作ることができます
作成する画像（“og:image”の画像）のサイズはSEO SIMPLE PACの管理画面に
と記載があったので、このサイズで作りました。
ただし、Facebookの推奨サイズなので、ブログカードの場合は両端が少し切れてしまいます。
このサイズで作る場合は、両端は切れてもよい状態にしておくと良いです
投稿ページでは、「アイキャッチ画像」が優先されるようなので、いつも作っているアイキャッチのサイズでも問題ないと思います
SEO SIMPLE PACで設定
設定する画像が準備できたら、次にSEO SIMPLE PACでの設定をしていきます
数分で完了する簡単な作業です
まずは設定画面を開きます
- ダッシュボード（管理画面）を開く
- 左側のSEO PACKにマウスオン
- OGP設定を開く
SEO SIMPLE PACではなく、SEO PACと表示されているので、注意しましょう
画像をアップロードして更新
- 基本設定の画面が開くので、OGPタグの基本設定の画像を選択から作った画像をアップロードします
- アップロードが出来たら設定を保存するをクリック
ブログカードに表示される、タイトルや説明文の設定
せっかくサムネイル画像の設定が出来たので、その他の部分の設定もしてしまいましょう
サムネイル画像の設定が出来たか確認
ブロック「関連記事」を追加して自分のサイトのURLを入れて確認してみましょう
こんな感じに表示されていればOKです。
ブログのタイトルや下の説明文の設定
ブログカードをよく見てみると、タイトル横の説明とタイトル下の説明が一緒になっているので変更しておきたいと思います
ここに表示される設定もSEO SIMPLE PACKで行います
まずは設定画面を開きます
- ダッシュボード（管理画面）を開く
- 左側のSEO PACKにマウスオン
- 一般設定を開く
一般設定
- 「フロントページ」のディスクリプションの設定
フロントページのディスクリプションのところに、サイトの説明文を入れてください
- 「フロントページ」のキーワードの設定
ここには、ブログで何か狙っているキーワードがあれば設定してください
私は、特に狙っているキーワードなどないので、適当に入れてみました
ブログカードを、もう一度確認
ブロック「関連記事」を追加して自分のサイトのURLを入れて確認してみましょう
説明文のところが変更されているのが確認できればOKです。
同じブログ内でトップページをブログカードで表示は出来ない
実は、今まで説明した内容は他のブログから外部リンクしてもらった場合に表示されます
同じブログ内でトップページをブログカードで表示させようと思っても、SWELLでは出来ません
正確に言うと
内部リンクを使っての表示はできないが、外部リンクを使っての表示はできます
見てもらったほうが早いと思うので実際に表示させてみたいと思います
【関連記事ブロック】内部リンクで作った場合
私のブログは、トップページを固定ページで作っているので、こうなってしまいます
【関連記事ブロック】外部リンクで作った場合
上手く表示されますが、外部リンクの場合は新しいタブで開いてしまうので、ユーザーにとってはストレスになります
テキストリンクを使おう
同じブログ内でトップページへのリンクを貼る場合は、ブログカードを使わずにテキストリンクを使いましょう
SWELL以外のテーマでは解りませんが、SWELLではおすすめしません
まとめ
全てが自動で出来ると思っていたら、結構設定が必要なものがありますよね
今回は、その中でもSEO SIMPLE PACで出来るブログカードに表示されるサムネイル画像と説明文の設定について紹介しました
私のブログが他のサイトでトップページの紹介されることが来るとは思えませんが、設定してみました
皆さんもやってみてください
コメント