PR
当ブログ愛用のWordPressテーマ
＼初心者でもおしゃれなブログを作れる！／
／デザインや機能をチェック！＼
おすすめAIツール6選
- AI文字起こしツール「【Notta】／Notta Memo」
- AI録音・要約ツール「Plaud Note／Plaud NotePin」
- AI動画編集ツール「PowerDirector」
- AI写真編集ツール「PhotoDirector」
- AI画像編集ツール「Photoroom」
- AIメンタルケアツール「Awarefy」
SWELLのOGP設定｜適した画像サイズやTwitterカードを表示する方法を紹介
「OGP設定方法が知りたい」
「Twitterに画像付きで記事をシェアする方法は？」
「OGP画像の推奨サイズを教えて」
この記事では、そんな方に向けて、SWELLのOGP設定方法を解説します。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
＼読みたい箇所をクリック／
この記事を読めば、あなたも簡単に
- 適したサイズの画像をSNSに表示できる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、Twitterからブログへ流入UPさせるためのOGP画像を設定できました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
また以下の記事では、SWELL導入後にやっておきたい設定を初心者向けに紹介しています。
あわせて読みたい
【全23項目】SWELLの初期設定｜これさえやっておけば間違いなし！
「SWELL導入後に何を設定すればいいの？」 「他テーマからSWELLへ移行後にすべき設定は？」 「サイトデザインの設定をしたい…」 この記事ではそんな方に向けて、SWELLで…
＼SWELL購入を検討中の人はこちらもご覧ください！／
あわせて読みたい
【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ
「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判…
この記事を書いた人
かめコンパス
- 副業で210記事以上を公開し、月1万PVを達成したWordPressブロガー
- 記事品質が企業にも評価され、27社から掲載依頼を受託
- 利用歴1年以上のCocoonからSWELLへ移行し、オシャレなブログを実現
目次
SWELLのOGP設定方法｜画像付きでSNSシェアできる！
SWELLのOGP設定をすることで、以下のようなSNSに記事をアップするときに画像付きでシェアできます。
設定方法は、WordPress管理画面を開き、SEO PACK⇒OGP設定の順にクリックしてください。
＼クリックで開く／
プラグイン「SEO SIMPLE PACK」の導入方法はこちら
STEP
プラグイン⇒新規プラグインを追加の順にクリックする
STEP
検索窓に「SEO SIMPLE PACK」と入力する
STEP
「SEO SIMPLE PACK」の今すぐインストールをクリックする
STEP
有効化をクリックする
これでSEO PACKが表示されます。
表示された以下3つの項目で設定します。
それぞれの項目を詳しく解説します。
「基本設定」：サイト全体のSNSシェア画像を設定する
OGP設定の基本設定では、トップページやアイキャッチ画像を設定していない記事をSNSに投稿するときに表示される画像を設定できます。
STEP
基本設定⇒画像を選択の順にクリックして、画像を挿入する
STEP
設定し終えたら、設定を保存するをクリックする
これで自サイトのページをSNSにシェアしたときに表示する画像を設定できます。
かめコンパスつぎに設定したOGP画像をどのSNSに適応させるか決めるよ
「Facebook」：URLやIDを設定する
FacebookにOGP画像を表示させたい場合に設定します。
STEP
Facebookをクリックし、表示されたページで設定する
Facebookで設定できる項目
- Facebook用のメタタグを使用する⇒Facebookアカウントを持っている人は「はい」を選ぶ
- FacebookページのURL⇒検索エンジンからアクセスしたFacebookページのURLを入力する
- fb:app_id⇒FacebookのアプリIDを入力する
- fb:admins⇒アプリ管理者の Facebook IDを入力する
STEP
設定し終えたら、設定を保存するをクリックする
これでFacebookにOGP画像を表示できます。
「Twitter」：アカウント名やカードタイプを設定する
𝕏（旧Twitter）にOGP画像を表示させたい場合に設定します。
STEP
Twitterをクリックし、表示されたページで設定する
Twitterで設定できる項目
- Twitter用のメタタグを使用する⇒Twitterアカウントを持っている人は「はい」を選ぶ
- Twitterアカウント名⇒Twitterアカウント「＠〇〇〇」の〇〇部分のみ入力する
- カードタイプ⇒「summary」or「summary_large_image」から選ぶ
かめコンパス画像が大きく表示される「summary_large_image」がおすすめ！
STEP
設定し終えたら、設定を保存するをクリックする
これで𝕏（旧Twitter）にOGP画像を表示できます。
SWELLで投稿ページごとにOGP画像を変更する方法
SWELLではアイキャッチ画像を設定することで、投稿ページごとにOGP画像を変更することができます。
投稿ページごとにOGP画像を変えることで、
- その投稿ページに合った画像を設定できる
- 同じ画像ばっかりでつまらなくなくなる
- SNSページが華やかになる
といったメリットがあります。
かめコンパスアイキャッチ画像＝OGP画像という理解でOK
アイキャッチ画像の設定方法は下記のとおりです。
STEP
記事編集画面で、設定⇒投稿の順にクリックする
STEP
アイキャッチ画像を設定をクリックする
STEP
更新をクリックする
これでアイキャッチ画像を設定し、OGP画像を変更できます。
SWELLでOGP画像の推奨サイズ
SWELLでOGP画像の推奨サイズは、
- 幅1200px×高さ675px ※Facebookを利用しない場合
- 幅1200px×高さ630px ※Facebookを利用する場合
の2通りです。
個人的には幅1200px×高さ675pxがおすすめで、その理由は
- アイキャッチ画像の推奨サイズが幅1200px×高さ675px
- 地デジやYouTube画面と同じ比率（＝アスペクト比16:9）
だからです。
投稿ページで設定したアイキャッチ画像がそのままSNSにシェアされるので、OGP画像もアイキャッチ画像と同じサイズがいいです。
また、普段見慣れている画像比率（＝アスペクト比16:9）のほうが違和感なく見れます。
かめコンパス画像もきれいに表示されるよ
ですので、OGP画像のサイズは幅1200px×高さ675pxにしましょう。
OGPの画像サイズを変更する方法
もし利用したいOGP画像が推奨サイズでなければリサイズしましょう。
リサイズ方法は以下の2通りあります。
CanvaでOGP画像をリサイズする
STEP
Canvaサイトを開き、カスタムサイズをクリックする
STEP
「幅」と「高さ」に変更したいサイズを入力し、新しいデザインを作成をクリックする
かめコンパス幅1200×高さ675pxがおすすめだよ
STEP
- サイドバーにあるアップロードをクリック
- ファイルをアップロードをクリックし、リサイズしたい画像をアップロードする
STEP
アップロードされた画像をクリックする
STEP
ページに挿入された画像をページいっぱいまで広げる
STEP
共有⇒ダウンロードの順にクリックする
STEP
ダウンロードをクリックする
これで、CanvaでOGP画像のリサイズ完了です。
ペイントでOGP画像をリサイズする
STEP
ペイントアプリを開き、リサイズしたい画像をページに挿入する
STEP
- サイズ変更と傾斜をクリック
- ピクセルを選択
- 縦横比を維持するを無効
- サイズを入力
- OKをクリックする
STEP
ファイル⇒保存の順にクリックする
これで、ペイントでOGP画像のリサイズ完了です。
SWELLでOGP画像が表示されないときの対処法
SWELLで設定したOGP画像が表示されない場合は、
- キャッシュクリアする
- 少し時間を待つ
の順に試してみましょう。
キャッシュクリアする方法は、WordPress管理画面の上部にあるSWELL設定にカーソルを置くと表示されるキャッシュクリア（コンテンツ）とキャッシュクリア（ブログカード）をクリックして行います。
これでOGP画像が表示されない場合は、少し時間を待ってみましょう。
かめコンパス私の場合、この方法で解決できています
SWELLのOGP設定まとめ
今回は、SWELLのOGP設定方法を紹介しました。
本記事のおさらい
＼読み直したい箇所をクリック／
当ブログではSWELLに関する記事をいくつか書いてます。
下のページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“𝕏フォロー”や“ブックマーク”してくれると嬉しいです！
・ ・ ・
SWELLの関連記事まとめ
SWELL専用ブロックの使い方
SWELLサイト全体のカスタマイズ
コメント