WordPressでホームページを作るには

【コピペ】WordPress、FacebookのOGPをプラグインなしで作成する方法

投稿日:

【コピペでできる、WordPressでの、FacebookのOGPをプラグインなしで作成する方法の解説です。

なぜ必要か?

Facebookでリンクを貼ると、OGPというサムネイル、タイトル、概要などがカード形式で表示されるので、ユーザービリティが高まります。

OGPのイメージ

facebookアプリを作成15

Web365とは

本題のまえに、自己紹介です。
クライアントの外部・外注のWeb担当としてWebサイトを集客売上増を目的に、分析・改善・実行まで一貫体制で運用代行しております。

Web365の詳細

FacebookのOGPは、Facebookでマイアプリを作成する

FacebookのOGPは、FacebookでOGP用のマイアプリを作成する必要があります。

そのアプリのIDをサイトに決まったコードで埋め込むことで、FacebookのOGPが設定できます。

※Facebookアカウント登録済みの前提で進めます。

手順は下記です。

  1. Facebook for Developersに登録
  2. アプリを作成
  3. アプリを設定してIDを取得

Facebook for Developersに登録

まず、Facebook for Developersに登録しましょう。

下記、トップページ、赤枠がログイン済みなら、マイアプリ、スタートガイド、まだなら、ログイン、など表示されていますので、クリックします。

Facebook for Developersに登録

つづいて、アカウント登録です。

レジスターの登録です。次へをclickします。

Facebook for Developersに登録2

コンタク情報です。メールアドレスを登録します。

次に、自身の属性について選択します。開発者を選択します。

Facebook for Developerに登録04

これで登録完了です。
つづいて、アプリを作成します。

アプリを作成

トップページから「アプリを作成」を選択

facebookアプリを作成01

今回のアプリは、あくまでOGPのためのアプリなので、「なし」を選択します
facebookアプリを作成02
アプリの名前、表示名は、「サイト名_OGP」などで良いです。
facebookアプリを作成03

アプリを設定してIDを取得

アプリができたら、アプリ内のダッシュボードにいき、左メニュー、設定の下層の「ベーシック」を選択します。
facebookアプリを作成06
アプリの各設定です。
  • 表示名(記入済み)
  • プライバシーポリシーのページURL(自身のサイトのプライバシーポリシーページ)
  • カテゴリー(ビジネスを選択)
facebookアプリを作成07

つづいて、同じ設定ページの最下部に、「プラットフォームを追加」で「Website」を選択し、自身のサイトを入力します。

facebookアプリを作成08

facebookアプリを作成09

facebookアプリを作成10

設定は完了しました。

最後に、アプリ設定の上部にある「開発中」のタブを「ライブ」に切り替えます。

facebookアプリを作成11

ライブに切り替えが完了しました。

facebookアプリを作成12

これで、アプリが起動している状態で、OGPの利用設定は完了です。

アプリのIDをコピーします。こちらをサイトに設定していきます。

facebookアプリを作成13

WordPressでプラグインなしで、FacebookのOGPを設定する方法

続いて、WordPressでプラグインなしで、FacebookのOGPを設定する方法の解説です。

プラグインなしで作成する理由

コードが扱えるなら、プラグインはできるだけ使用しないほうが良いです。

プラグインのメリットは

  • 自分でコードを書かずに機能を利用できる

プラグインのデメリットは

  • プラグインは機能過多で、重くなる要因
  • 定期メンテンナンスが必要になる
  • 開発者自体のメンテンナンスがないと、サイトセキュリティが下がる

です。

当方も、クライアントサイトなど、工数加味して、問題なければ、できるだけプラグインなしで実装をします。

さて、

FacebookのOGP設定が諸々できたら、

アプリのIDをコピペして、下記の手順に進みます。

function.phpに下記コードでheadに挿入させる

function.phpに下記コードでheadに挿入させ、対応

function my_meta_ogp() {

//og:type
$ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

//og:image
if ( is_singular() && has_post_thumbnail() ) {
$ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
$ogp_img = $ps_thumb[0];
} else {

$ogp_img = 'ここはデフォルトのアイキャッチ画像のURL';
}

// facebookのapp_id(設定する場合)
$insert.='<meta property="fb:app_id" content="ここにapp_idを">'."\n";
echo$insert;
  }
} //END my_meta_ogp
add_action('wp_head','my_meta_ogp');//headにOGPを出力

FacebookのOGPテスト

諸々、設定完了したとろこで、OGPのテストをします。

下記で、対象のページを入力し、デバッグをクリックすると、OGPがプレビューできます。

シェアデバッガー – Facebook for Developers

facebookアプリを作成06

すると、下記のような形でプレビューできます。成功ですね。

facebookシェアデバッガーイメージ

以上です。

ご活用ください。

■お気軽にご相談ください

Webサイトをより多くの方に認知してもらうために、OGPは大切です。
Webサイトの細かい改善は担当をつけて継続的に対応することをおすすめします。
Webサイトの分析提案や改善実行など相談したい方はこちらよりお気軽にご連絡ください。

必須お名前
必須メールアドレス
必須ご相談内容
必須メッセージ本文






Web制作+Webマーケティングの個別講座開講中

Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております


・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方

どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。






外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています

・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方


是非Web365までご相談ください。

【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方

Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行(Googleアナリティクス、eコマース、ヒートマップClarityなど)


まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。

WordPressでホームページを作るには

執筆者:

関連記事

イメージ00_【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれておこう

【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれておこう

【解説】WordPressの保守、プラグインのバージョン管理ができるWP Rollbackをいれ方を解説します。 クライアントサイトで対応例です。前提条件もありますが、プラグイン2つで対応します。 W …

インタビュー方法

【テンプレート】事例紹介のインタビューページで大事な5項目と手順マニュアル解説

自社サイトで実績事例を紹介したい、インタビュー記事を作成したいと考えてはいませんか? クライアントサイトで、事例コンテンツ作成するときに、どんな構成で作成すると良いのか? インタビュー記事の訴求ポイン …

WordPressの企業サイト事例

WordPressの企業サイト事例とテーマ選【徹底解説】

  【5分で読めます】 WordPressで企業サイト構築の検討に役立つ記事です。 WordPressで企業サイトを構築するメリット・デメリットやWordPressの企業サイトに向いてるか判断する7つ …

サイトのパスワード設定

【解説】WordPressサイトでURLを知っているひとしか閲覧できない設定方法

サイトでURLを知っているひとしか閲覧できない設定方法を知っていますか? 今回は、WordPressサイトで、どんな方法で設定するかをお伝えします。 設定には、Google検索に掲載させない方法やパス …

【体験】オンラインビジネスチャットサポートってなに?無料体験の流れと機能を解説

Webサイトの閲覧ユーザーの満足度をあげる機能「オンラインビジネスチャットサポート」、つまりチャットってどんなものなの?いちサービスを無料体験してみた流れと機能解説などしてみたいと思います。 Web3 …

WordPressサイトの各バージョンアップをする前に知っておくべきこと

【解説】WordPressサイトの各バージョンアップをする前に知っておくべきこと

WordPressサイトの各バージョンアップをする前にすべきことを知っていますか? 今回は、バージョンアップについての全体像と、手順、バージョンアップ前にすべきことをお伝えします。 バックアップには3 …

WEBサイトのコンテンツを効率的に作る方法「動画コンテンツをテキストコンテンツに転用する」

Webサイトの大事な役割であり、運用が大変なものが、「コンテンツ作成」です。 自身のサイトのコンセプトに適うコンテンツを新規で作成し、改善更新することはサイト運用でとても重要です。 しかし、重要なのは …