Webマーケティング プログラミング ホーム

【写真付き解説】WPでTwitterとfacebookのOGP設定する方法

考える人

WordPress でSNS拡散の際のOGP設定をしたい。FacebookとTwitterで正常に表示させたい!

 

このような疑問に答えます

 

使うプラグイン

まず、2020年4月の段階でワードプレスでOGP設定をするなら

 

All in One SEO 一択でいいです

 

理由は、使い方が簡単でコードを書かなくていいから

 

そして、したい設定の全てが網羅されてるからです

 

そして、FacebookとTwitterのOGPを設定する場合、下記の二つの項目を埋める必要があります

twitter

 

facebook

 

一見作業が多そうに思えますが、大丈夫。

 

一つずつ説明していきます

 

twitter のOGPを設定する場合

Twitterは簡単で、

 

All in One SEOのソーシャル設定の画面に移動して

 

ここに、下記のように

 

Twitterのアカウント情報を貼り付けてください

 

 

こんな感じ、これは、ここですね ↓

 

 

これだけでOkです。簡単ですね

 

Facebook 管理者 IDを取得する

次、Facebookです、Facebookの場合は、少し作業が増えますが、にしても五分で終わります

 

やることは二つで、Facebook 管理者 IDと、Facebook アプリ IDを取得すること

 

これだけ。

 

Facebook 管理者 IDを取得するには、ここへアクセスして

 

facebookページのプロフィールを貼り付けてください。(***注意、個人ユーザーのURLは使えません)

 

 

コピーしたURLを、先ほどアクセスしたここへ貼り付けます

 

すると、こんな感じで取得できます

 

以上です

Facebook アプリ ID

次、Facebook アプリ IDを取得しましょう

 

方法は、ここへアクセスして、画面右上のボタンから、新規のアプリを作ります

 

 

メアドとアプリ名を入力して終わり

 

 

画面左上部にこんな感じで表示されます

 

 

facebook情報をAll in One SEOへ設定します

で、最後にFacebook 管理者 IDと、Facebook アプリ IDを下記へ設定します

 

 

done !!! 🎉

すると、こんな感じでFacebookやTwitterの投稿にOGPが表示されます

 

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

-Webマーケティング, プログラミング, ホーム
-, , , , , ,

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.