【SWELL】トップページをブログカードで表示|サムネイル画像と説明文の設定

ブログのトップページをブログカードで表示させるときのサムネイル画像と説明文を設定する方法

投稿記事をブログカードで表示させる場合はアイキャッチがサムネイルとして使われています。
ですが、ブログのトップページを他のサイトがリンクしてくれた時はどうなるのか?と思い調べてみました

当方のブログで試してみたところ、こうなりました

これは画像です

やはりサムネイル画像が表示されていません

一緒にサムネイルを表示させる方法を調べたので紹介します

この記事は

  • トップページをブログカードで表示した時にサムネイル画像を表示させる方法
  • トップページをブログカードで表示した時の説明文の設定方法

についての内容になっています

SEO SIMPLE PACKで設定するので、別のプラグインを使っている人は対象外です

目次

ブログのトップページをブログカードで表示させる時のカスタマイズ方法

SWELLで推奨されているSEO SIMPLE PACのプラグインを使っての設定になります。
SWELL独自での設定はありません

設定する画像(“og:image”の画像)を作っておく

私が作った、このサイトの“og:image”の画像です

私はいつもCanva Proを使って作っています
無料版でも簡単に作ることができます

作成する画像(“og:image”の画像)のサイズはSEO SIMPLE PACの管理画面に

Facebookの推奨サイズは 1200×630px です。

と記載があったので、このサイズで作りました。
ただし、Facebookの推奨サイズなので、ブログカードの場合は両端が少し切れてしまいます。
このサイズで作る場合は、両端は切れてもよい状態にしておくと良いです

投稿ページでは、「アイキャッチ画像」が優先されるようなので、いつも作っているアイキャッチのサイズでも問題ないと思います

SEO SIMPLE PACで設定

設定する画像が準備できたら、次にSEO SIMPLE PACでの設定をしていきます
数分で完了する簡単な作業です

まずは設定画面を開きます

SEO SIMPLE PAC
  1. ダッシュボード(管理画面)を開く
  2. 左側のSEO PACKにマウスオン
  3. OGP設定を開く

SEO SIMPLE PACではなく、SEO PACと表示されているので、注意しましょう

画像をアップロードして更新

  1. 基本設定の画面が開くので、OGPタグの基本設定の画像を選択から作った画像をアップロードします
OGP設定画面です
  1. アップロードが出来たら設定を保存するをクリック

ブログカードに表示される、タイトルや説明文の設定

せっかくサムネイル画像の設定が出来たので、その他の部分の設定もしてしまいましょう

サムネイル画像の設定が出来たか確認

ブロック「関連記事」を追加して自分のサイトのURLを入れて確認してみましょう

ブログカードで表示されたサムネイル画像

こんな感じに表示されていればOKです。

ブログのタイトルや下の説明文の設定

ブログカードをよく見てみると、タイトル横の説明とタイトル下の説明が一緒になっているので変更しておきたいと思います

ここに表示される設定もSEO SIMPLE PACKで行います

まずは設定画面を開きます

  1. ダッシュボード(管理画面)を開く
  2. 左側のSEO PACKにマウスオン
  3. 一般設定を開く

一般設定

  1. 「フロントページ」のディスクリプションの設定

フロントページのディスクリプションのところに、サイトの説明文を入れてください

  1. 「フロントページ」のキーワードの設定

ここには、ブログで何か狙っているキーワードがあれば設定してください

私は、特に狙っているキーワードなどないので、適当に入れてみました

ブログカードを、もう一度確認

ブロック「関連記事」を追加して自分のサイトのURLを入れて確認してみましょう

説明文のところが変更されているのが確認できればOKです。

「フロントページ」のディスクリプションで設定した文字が表示されるのは80文字程度なので、その中で納まるように内容を考えると良いでしょう

同じブログ内でトップページをブログカードで表示は出来ない

実は、今まで説明した内容は他のブログから外部リンクしてもらった場合に表示されます

同じブログ内でトップページをブログカードで表示させようと思っても、SWELLでは出来ません
正確に言うと

内部リンクを使っての表示はできないが、外部リンクを使っての表示はできます

見てもらったほうが早いと思うので実際に表示させてみたいと思います

【関連記事ブロック】内部リンクで作った場合

私のブログは、トップページを固定ページで作っているので、こうなってしまいます

【関連記事ブロック】外部リンクで作った場合

上手く表示されますが、外部リンクの場合は新しいタブで開いてしまうので、ユーザーにとってはストレスになります

テキストリンクを使おう

同じブログ内でトップページへのリンクを貼る場合は、ブログカードを使わずにテキストリンクを使いましょう

SWELL以外のテーマでは解りませんが、SWELLではおすすめしません

もし何か良い方法がある場合、コメントなどで教えていただけると嬉しいです

まとめ

全てが自動で出来ると思っていたら、結構設定が必要なものがありますよね
今回は、その中でもSEO SIMPLE PACで出来るブログカードに表示されるサムネイル画像と説明文の設定について紹介しました

私のブログが他のサイトでトップページの紹介されることが来るとは思えませんが、設定してみました

皆さんもやってみてください

ブログのトップページをブログカードで表示させるときのサムネイル画像と説明文を設定する方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる