SWELLでOGP画像を設定する方法と反映されない時の対処

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

記事をXやLINEでシェアしたとき、画像が表示されなかったり、意図しない画像が出たりして困ったことはありませんか。シェアされたときの見た目は、クリックされるかどうかを大きく左右します。SWELLならOGP画像を、アイキャッチとカスタマイザーで整えられます。

この記事では、SWELLでOGP画像を設定する方法を手順付きで解説します。私が実際にやってしまった失敗や、正しく表示されているかの確認方法もお伝えしますね。プラグインなしで、シェアされたときの見た目を整えられますよ。

※まだSWELLを導入していない方へ:SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

Xでシェアしたら、画像が出てこなかったにゃ…

たいがブログ

気になりますよね。OGP画像を整えればきれいに表示されますよ。

ニャフィ

プラグインを入れないといけないのかにゃ?

たいがブログ

SWELLの標準機能だけで設定できる手順をご紹介しますね。

▼あわせて読みたい:SNSから一気に読者が訪れても、速いサーバーならストレスなく表示できます。ブログの土台になるサーバー選びはこちらで解説しています。

あわせて読みたい
エックスサーバーの評判は本当?初心者ブログで実際に使ってみた正直レビュー 本記事はアフィリエイト広告を含みます。 「エックスサーバーって評判いいって聞くけど、初心者の自分でも本当に使いこなせるのかな」と不安になっていませんか。 サー...
目次

SWELLのOGP画像とは?設定前に知っておきたい基本

OGP画像とは、記事がSNSでシェアされたときにカードとして表示される画像のことです。タイトルや説明文と一緒に表示され、シェアを見た人がクリックするかどうかの決め手になります。

SWELLは、OGPの情報を自動で出力してくれるテーマです。基本は記事ごとのアイキャッチ画像が、そのままOGP画像として使われる仕組みです。

アイキャッチがOGP画像として使われる

記事ごとにアイキャッチ画像を設定しておけば、シェアされたときにその画像が表示されます。私は以前、アイキャッチを後回しにして公開した記事がシェアされ、画像なしの寂しいカードになってしまいました。公開前のアイキャッチ設定は欠かせません。

OGP系のプラグインとの重複に注意する

別のテーマを使っていたころはOGP用のプラグインを入れていて、SWELLに移ったあとも停止し忘れていました。その結果、OGPの情報が二重に出力され、意図しない画像が表示されることに。SWELLでは、OGP系のプラグインは基本的に不要です。

SWELLでOGP画像を設定する方法

ここからは、記事ごとのOGP画像と、全体の初期画像を設定する手順を見ていきましょう。アイキャッチの設定とカスタマイザーの2か所で行います。

アイキャッチがないページでも画像を出すために、サイト全体の初期OGP画像も用意しておくと安心です。トップページや固定ページをシェアされたときに役立ちますよ。

画像サイズは横長の1200×630pxが目安

OGP画像は、横1200px×縦630px前後の横長サイズで作っておくと、多くのSNSできれいに表示されます。端が切れても困らないよう、文字は中央に寄せるのがコツです。

初期画像にはブログ名入りの画像がおすすめ

初期OGP画像には、ブログ名やロゴが入った画像を設定しておくと、どのページがシェアされても一目でブログだとわかります。ブランドの印象づけにもつながりますよ。

STEP
OGP用の画像を用意する

横1200px×縦630px前後の画像を、記事用とサイト全体用に用意しておきます。

STEP
記事のアイキャッチ画像を設定する

記事の編集画面の右サイドバーにある「アイキャッチ画像」から、用意した画像を設定して保存します。

STEP
カスタマイザーで初期OGP画像を設定する

「外観」→「カスタマイズ」を開き、OGP画像に関する項目にサイト全体用の画像を設定して「公開」します。

STEP
OGP系のプラグインを停止する

「プラグイン」の一覧を確認し、OGPを出力するプラグインが有効になっていれば停止しておきます。

STEP
シェアして表示を確認する

実際に記事のURLをXやLINEに貼り付け、設定した画像が表示されるか確認したら完了です。

OGP画像が反映されないときの対処法

設定したはずなのに、シェアすると古い画像のまま表示されることがあります。多くの場合、原因はSWELLの設定ではなく、SNS側やサイト側に残っている古い情報です。

慌てて設定をいじり直す前に、キャッシュを順番に確認するのが近道です。原因さえわかれば、数分で解決できることがほとんどですよ。

SNS側に残った古い情報を更新する

SNSは一度読み込んだOGP情報をしばらく保存しています。Facebookなら「シェアデバッガー」、LINEなら「LINE Page Poker」で記事のURLを入れると、最新の情報を読み込み直せます。私もアイキャッチを差し替えた直後に古い画像が出て焦りましたが、このツールで一発で直りました。

サイトのキャッシュとアイキャッチを見直す

サイト側のキャッシュが残っていると、SNSが古いページを読み込んでしまいます。キャッシュプラグインのキャッシュを削除し、アイキャッチ画像が正しく保存されているかも確認しましょう。別のテーマではOGPの出力場所が複数あって原因探しに苦労しましたが、SWELLは仕組みがシンプルなので切り分けやすいです。

▼あわせて読みたい:シェアされやすい記事は、読者が知りたいことにしっかり答えている記事です。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

あわせて読みたい
ラッコキーワードレビュー|無料から使えるキーワード調査ツールはブログ運営に本当に使えるか正直に話... 本記事はアフィリエイト広告を含みます。 「ラッコキーワード、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事のネタを探...

SWELLのOGP画像設定でよくある質問

OGP画像はどうやって作ればいいですか?

Canvaなどのデザインツールを使えば、テンプレートから手軽に作れます。サイズを1200×630px前後に設定し、文字は中央に大きめに入れましょう。

トップページをシェアすると画像が出ません。

トップページには記事のアイキャッチがないため、カスタマイザーで初期OGP画像を設定しておく必要があります。設定後はキャッシュも削除しましょう。

OGPを整えるとSEOにも効果がありますか?

検索順位に直接影響するわけではありませんが、SNSでのクリック率が上がり、読者が増えるきっかけになります。結果的にブログの成長につながりますよ。

画像の一部が切れて表示されます。

SNSによって表示される範囲が少しずつ違います。大事な文字や顔は中央に寄せ、端に余白を取るデザインにすると切れにくくなります。

【当サイト限定特典】:今月中に下記の公式特設ページから申し込むと、最大30%OFF(月額693円〜)の圧倒的コスパで国内シェアNo.1の超高速環境が手に入ります。

➡️【公式】エックスサーバーの限定特設ページはこちら

設定さえ終われば、今日からすぐにブログを書き始められます。この機会にぜひ一歩踏み出してみてください。

まとめ:OGP画像を整えてシェアされる記事にしよう

SWELLでは、記事ごとのアイキャッチとカスタマイザーの初期画像を設定するだけで、OGP画像を整えられます。反映されないときは、SNS側とサイト側のキャッシュを順番に確認するのが解決のコツでした。

シェアされたときの見た目は、記事の第一印象そのものです。まずは人気記事のアイキャッチを見直して、SNSでの表示を確かめてみてください。

ニャフィ

シェアしたら、きれいな画像が出るようになったにゃ!

たいがブログ

お疲れさまでした!これでSNSからの読者も増えそうですね。

ニャフィ

シェアされる記事、文章も整えておきたいにゃ。

たいがブログ

手頃な料金で使える校正ツールのレビューもぜひどうぞ。

▼あわせて読みたい:多くの人に届く記事こそ、誤字脱字のない文章で届けたいもの。お手頃価格で始められる日本語校正ツール「Shodo」を実際に使ってみた感想をまとめています。

あわせて読みたい
Shodo(ショドー)レビュー|日本語校正ツールはブログ運営に本当に使えるか正直に話します 本記事はアフィリエイト広告を含みます。 「Shodo、無料で使えると聞くけど、有料プランまで必要なのか正直知りたい」という人はいませんか。記事を公開したあとに誤字...

おすすめ記事

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

この記事を書いた人

コメント

コメントする

目次