素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

副業

【Twitter向けOGP】Twitterでブログリンク内容を綺麗に表示させる方法

投稿日: 2018年3月24日
最終更新日:

スポンサーリンク

336×280




OGPとは

ブログ記事をTwitterやライン等でシェアする事はよくあると思います。

しかし、その際にWordpressの記事側で正しくとある設定をしていないと正しく記事が表示されず、見た目がダサくなってしまいます。
例えば、Twitterだと以下のようになってしまいます。


綺麗にレイアウトを整えるための設定が何も入っていないので、ただのリンク文字列になってしまいます。

そんな時はOGPの設定をしっかりと設定すれば以下のような形でリンクが差し込まれるようになります。

OGPとは、「Open Graph protocol」の略称の事で、FacebookやLine、Twitter、Google+、mixiなどの様々なSNSで記事をシェアした際に、その記事ページのタイトル、URL、概要、アイキャッチ画像(サムネイル)を綺麗に整えて表示させる事を可能にする仕組みです。

こちらはheader.phpに記述を指定するだけで、簡単にOGPの設定が完了するので今回はTwitter向けのOGP設定の仕方についてご紹介します。

手順

header.phpに追記

まずはダッシュボードから外観>テーマの編集>テーマヘッダー(header.php)を選択してください。

次に以下のコードを追記してください。

※35、40、42行目にはWordpressにアップロードした任意の画像URLを設定してください

追記が完了したらファイルを更新ボタンをクリックします。

確認

では、TwitterのタイムラインをリロードしてOGPの設定が反映されたか確認してみましょう。
※OGPは都度情報を取得するのでブログ側の設定を変えれば、過去の投稿でも最新のOGPが適用されるようです

もちろん、記事ページについてもOGPが適用されるようになっています。

アイキャッチ画像が見切れてしまう

横長サイズのアイキャッチを設定している場合、上記の設定では見切れて表示されてしまいます。
その場合は以下のように設定を変えることでレイアウトを変えることが可能になります。

終わりに

今は各種SNSシェアからの流入はとても大きなPVアップに有効なのでOGPの設定はアフェリエイトをやっているブログとしては必須だと思います。

OGPの設定はTwitterやFacebookなどSNS毎に細かい設定が可能なので是非いろいろ試してみてください♪

336×280




336×280




CATEGORIES & TAGS

副業, , , , , , ,

blogenist

Author: blogenist