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

副業

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

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

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/03/15 15:06:44時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/03/15 19:06:06時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,080 (2024/03/15 19:03:47時点 Amazon調べ-詳細)

翼を授けよう!

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,180 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

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

関連記事

YouTubeも見てね♪

お名前.comサイドバー