アフィンガー

【アフィンガー】OGP設定を3分でわかりやすく!twitterで表示するにはこの設定が必要です

初心者
アフィンガーを利用しています。OGPの設定ってどうやってやればいいですか?
  • OGPの設定がわからない
  • twitterがうまく表示されない
  • アイキャッチのサイズを変えたい

こんな悩みに答えます。

当サイトは「All in One SEO Pack」を外して、アフィンガーのOGPを使っています。

設定するとこんな感じでみせることができます。

本記事の内容

・OGPの設定方法
・よくある失敗例とその解決策
・twitterカードを綺麗にみせるコツ

当サイトの実際の設定画面をみせながら、解説していきます。

アフィンガー OGP 設定方法

ずばり「ID」を入力するだけです

設定といっても簡単でして、twitterのIDをいれるだけです。

この部分を アフィンガー5管理 - SNS - Twitter設定 から

設定画面に入力するだけでOKです。

上部の設定は、SNSボタンの話なので不要です。

なお「twitterを持っていない」もしくは「連携させたくない」という人もいらっしゃるかと思います。

代替案として添付画像を使った方法があります。

詳細はのちほど説明しますので参考ください。

twitterカードが反映されない…

うまく画像が反映されない、、、

そんなときは「チェックツール」を使ってください。

https://cards-dev.twitter.com/validator

公式のチェックツールでして、表示させたいURLをいれて

2回ほどクリックしてみてください。

うまくいかない理由のほとんどはこの問題でして、キャッシュをクリアにすればOKです。

キャッシュなので、チェックツールを使わなくても数日待てば反映されます。

急ぎでいる人は試してみてください。

綺麗にみせるコツ

画像サイズは 1280 * 720 にする

twitterカードで表示される画像は「アイキャッチ」です。

当サイトでは画像サイズは1280pxで統一しており、バランスよく綺麗にみえるように設計しています。

この比率は「マナブさん」の画像サイズを参考にしています。黄金比を意識しており、僕自身気に入っています。

画像の枚数をふやす

twitterでは画像を添付すると、優先的にtwitterカードの画像よりも、添付画像を表示してくれます。

こんな感じ。

https://twitter.com/sanohideto/status/1185095074436263936?s=20

twitterカードでは1枚しか表示できませんが、この方法を使えば最大4枚まで表示できます。

まとめ

最後に当サイトで設定しているOGP設定についてまとめます。

アフィンガーの設定はこちら。

ソースをみると。

※command + option + U でソースをチェックできます 

こんな感じで設定しておけば、問題ありません。

今回は以上です。

キャッチコピーが入ります

AFFINGER5専用子テーマ「ichikara」を開発しました。ichikaraは、ファイルをインストールするだけカンタンに利用できるデザインテンプレートです。

柔軟性の高いデザイン設定、CTAからランディングページ機能まで、コンテンツマーケティング専用ブログメディアとしてご利用いただけるよう設計されています。

初めての方でも安心してご購入いただけるようサポート付きです。

  • この記事を書いた人
  • 最新記事

ichikara

ワードプレスを愛するフリーランスです。テーマやプラグインを制作するパブリッシャーとして活動してます。

-アフィンガー

© 2021 ICHIKARA Powered by AFFINGER5