鍼灸治療専門、奈良県橿原市の鍼灸院

ご予約・お問い合わせ【予約優先制】
TEL. 0744-55-2472

Facebook向けOGPをWordPress用に正しくカスタマイズ

Facebookでいいね!やシェアをする時にURL、タイトル、説明、画像を表示するための設定。WordPress用にカスタマイズしたときに調べると間違ってる記述も多かったので(たぶん)正しい記述を紹介。Facebook Developersのオープングラフリファレンスを参考にしました。

OGPを使うための下準備

OGPの設定をする際はheadに以下のタグを書く。

もしくは

ブログの記事はarticleでその他のページがwebsiteを使うといいっぽい。

検索するとhtmlタグに

を書け、と出てくるページがあるけどもこれはXHTMLで組む時のみ。
HTML5で組むときはheadタグに書くので注意。

メタタグについて

設定するメタタグは以下のとおり

実際の記入例、私のサイトの場合

website、article両方に使うメタタグ

投稿記事に使うメタタグ

その他のページに使うメタタグ

WordPressの記述

フェイスブックのアプリID

詳しい説明はぐぐってください。

サイトの名前

テンプレートタグで引っ張ってくる。

地域

もちろん日本。

投稿記事ページとそれ以外のページの条件分岐

投稿記事はtype:articleで、その他のページはtype:websiteで表示するための構文です。

タイプ:投稿記事のとき

ブログの記事やニュース記事のときはこのタイプが好ましいらしいです。
type:blogはすでに廃止になったのかどこにもないです。

URL:投稿記事のとき

URLの取得。the_permalink()はループ内で使うタグなのでget_permalink()でリンクを取得してechoで書き出してます。

タイトル:投稿記事のとき

ほんとはサイトの名前は適切ではないんだけど、シェアしたときに分かりやすくなるのであえてつけちゃってます。
the_title()はループ内で使うタグなのでwp_title()でページのタイトルを取得してます。

説明:投稿記事のとき

サイトの説明の取得。ここがすごい手間取りました。
このサイトを参考にしました。

$post->post_content;は整形前の生のデータを抜き出してしまう

the_content()やthe_excerpt()はループ内で使うタグなので、$post->post_contentで記事内容を取得してます。
そのままでは色々と問題があるので
apply_filtersで、$post->post_contentにthe_contentのフィルターをかけて、
strip_tagsで余計なタグを取り除いて、
mb_substrで0文字目から100文字を取得して続きは…を表示して省略するようにしてます。

画像:投稿記事のとき

イメージ画像の取得。これもややこしいですね。
このサイトを参考にしました。

[WordPress]これは簡単!プラグインを使わずにOGPを設定する方法!

3つのパターンでそれぞれ画像を変えます。
1.アイキャッチがある場合
2.アイキャッチがなくて、画像がある場合
3.アイキャッチも画像もない場合

まずhas_post_thumbnail()でアイキャッチがあるかを判断します。
$image_idという変数にget_post_thumbnail_id()で取得したIDを代入します。
$imageという変数にwp_get_attachment_image_src(ID,画像の大きさ)を代入します。
アイキャッチがあれば$image[0]で画像のURLを表示されます。[0]はURL、[1]は幅、[2]は高さが表示されます。

アイキャッチがなければelseif以降でアイキャッチ以外の画像があるかをさがします。
preg_match(検索パターン,探す場所,変数)で <img src=”~”> を探します。
検索パターンは正規表現っていうやつなんですがややこしいのでぐぐってください。
今回の場合でざくっと説明すると <img 文字 src= [”or’] (文字) [”or’] 文字 > という記述があるかどうかを探します。
今回の場合最初に出てくる <img src=”(画像のパス)” alt=”説明”> という記述を探してきて変数$imgurlに代入します。
見つかれば$imgurl[1]で最初の()の部分、今回は画像のパスを表示します。

アイキャッチも画像もない場合はelse以降で用意した画像を表示させます。
サイトの直下に画像がある場合はhome_url()タグを使います。bloginfo(‘url’)は今は推奨されてません。
テーマフォルダにある場合はget_template_directory_uri()タグを使います。

ちなみに画像サイズについてですが、少なくとも600x315px以上、推奨は1200x630pxかそれ以上となってます。比率は1.905:1です。

Facebookとの紐付け

フェイスブックページのURLを記載します。
さらに個人ページも記載する場合は

を書きます。私は個人のページは紐付けしてないのでこれは省略しました。

ここまでが投稿記事ページのOGP設定になります。

その他のページの設定

投稿記事以外のページはそれぞれ固定の設定になっています。
typeはwebsite
urlはホームURL
titleはサイトの名前
descriptionはサイトのキャッチフレーズ
imageは用意した画像をそれぞれ設定しています。

type:business.businessについて

Facebook Developersのオープングラフリファレンスを見るとog:typeには他にもカフェ用とかレストラン用とかビジネス用とか色々あるのですが、設定してもイマイチ違いが分からないので今回はスルーします。今後反映されるようになったときの参考のために記述だけ載せておきます。

最後の確認

ちゃんと設定されているかFacebookデバッガーで確認します。
エラーが出てなかったらOKです。

正直PHPはさっぱり分からないので間違っていたらどんどん突っ込んでください。

ご予約、無料相談など
お気軽にお問い合わせください。
0744-55-2472
Webフォーム

コメントをどうぞ


ご予約、無料相談など
お気軽にお問い合わせください。
0744-55-2472
Webフォーム
受付時間
9:00~12:00
15:00~20:00

☆9:00~15:00 休診日 日曜・祝日

当院は予約優先制です

時間外でも診療できることもあるのでご連絡ください

所在地
〒634-0007 奈良県橿原市葛本町218-4
ガーデンハイツ明日香1階東号室


PageTop