Twitter Cardsにも対応!WordPressにプラグインなしでOGPを設置する方法

Twitter Cardsにも対応!WordPressにプラグインなしでOGPを設置する方法

Twitter Cardsにも対応!WordPressにプラグインなしでOGPを設置する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • このエントリーをはてなブックマークに追加

Open Graph Proというプラグインを使えば、簡単にWordPressサイトにOGPを設置することができます。しかしながら、なるべくプラグインを使いたくないという方もいらっしゃると思います。

そこで今回は、プラグインなしでOGPを設置する方法を紹介したいと思います。

スポンサードリンク

WordPressにプラグインなしでOGPを設置する方法

参考にしたのは以下の記事です。だいぶ古い記事ですが、ちゃんと動作します。

[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のwebメモ

ここに書かれているコードをheader.phpにコピペするだけで、すぐにOGPを設置できます。素晴らしいですね!

これを少し改良して、Twitter Cardsにも対応させたのが、以下になります。

<!-- OGP -->
<meta property="fb:admins" content="●●●●●●●●●●●●●●●●●●" /><!-- 自分のFacebookアカウントに対応するID(FBページの場合は省略) -->
<meta property="fb:app_id" content="●●●●●●●●●●●●●●●●●●" /><!-- FacebookアプリID -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.get_the_excerpt().'">';echo "\n";//抜粋を表示
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; echo esc_url(home_url()); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
echo '<meta name="twitter:image:src" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
echo '<meta name="twitter:image:src" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="画像パス">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="画像パス">';echo "\n";
}
?>
<meta name="twitter:site" content="@アカウント名" />
<meta name="twitter:card" content="summary" />
<!-- //OGP -->

fb:adminsやtwitter:siteのアカウント名などは適宜変更してください。また、サムネイルがない場合に使用する画像もサーバーに用意し、画像パスを入れてください。

fb:app_idはわからない場合、なくても大丈夫だと思います。(参考にした記事でも入っていません。)

fb:adminsの調べ方

Facebookにログインして、プロフィール画像をクリックします。表示されたURLの&type=1の直前の数字がfb:adminsのIDになります。

https://www.facebook.com/photo.php?fbid=123456789762686&set=a.123456789188347.13029.012345678901234&type=1&theater

上記だと、012345678901234がfb:adminsのIDです。

調べたIDが正しいかどうかをチェックするには、

http://www.facebook.com/profile.php?id=fb:admins

のfb:adminsをIDに置き換えてアクセスします。ちゃんとプロフィールが表示されれば、正しいIDということになります。

og:descriptionがうまく出力されない場合の対処法

og:descriptionがうまく出力されない時があって、8行目を以下のように変更したら改善しました。

echo '<meta property="og:description" content="'.get_the_excerpt().'">';echo "\n";

og:descriptionの中身が空っぽになる場合は、お試しください。

あとがき

OGPを出力するのにプラグインを使っていた方は、これでプラグインを1つアンインストールできますね。ぜひ参考にしてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。