Web制作で役立つメモをWEB MEMO LOG

2017.07.19

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

今やSNSでの拡散等を考慮すると、必須設定事項のOGP(Open Graph Protocol)ですが、WordPressでプラグインを利用せずに設定する方法をメモメモ。

表示例

【参考】Facebook・TwitterのOGP設定方法まとめ|ferret [フェレット]

<meta property="og:title" content="ページタイトル|サイト名">
<meta property="og:type" content="オブジェクトタイプ(TOPページ「website」/その他「article」)">
<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="ページURL">
<meta property="og:description" content="ページの説明(記事ページの場合は本文抜粋)">
<meta property="og:image" content="画像(優先順位 [1]アイキャッチ [2]記事中の画像 [3]あらかじめ設定した画像)">
<meta property="og:locale" content="言語設定">
<meta name="twitter:card" content="Twitterカードの種類(summary/summary_large_image/photo・・・)">
<meta name="twitter:site" content="@Twitter ID">
<meta name="twitter:title" content="ページタイトル|サイト名">
<meta name="twitter:description" content="ページの説明(記事ページの場合は本文抜粋)">
<meta name="twitter:image:src" content="画像(優先順位 [1]アイキャッチ [2]記事中の画像 [3]あらかじめ設定した画像)">

WordPressでのOGP設定

<?php 
//TOPページ判定
$toppage = (is_home())? TRUE: '';
 
//各種設定
$image_og = '***/***/ogp.jpg';//画像設定[横1200px × 縦630px](絶対パスで設定)
$locale = 'ja_JP';//言語設定
$twitter_card = 'summary_large_image';//Twitterカード設定
$twitter_id = '@twitter_id';//Twitter ID設定
$image_tw = '***/***/ogp_twitter.jpg';//Twitter画像設定[横560px × 縦300px 程度](絶対パスで設定)
 
//各種取得
$site_name = get_bloginfo('name');//サイト名を取得
$description = get_bloginfo('description');//サイト説明を取得
$category = get_the_category();//カテゴリを取得
$cat_name = $category[0]->cat_name;//カテゴリ名を取得
$blog_title = get_the_title();//タイトルを取得
 
//title
if($toppage) {
    $title = $site_name;
} elseif(is_category() ) {
    $title = $cat_name.'|'.$site_name;
} elseif(is_404() ) {
    $title = '404 Page Not Found|'.$site_name;
} elseif(is_search()) {
    $title = '「'.get_search_query().'」の検索結果|'.$site_name;
} elseif(isset($blog_title) && !is_front_page()) {
    $title = $blog_title.'|'.$site_name;
} 
 
//type
if($toppage){ $type = 'website';} else { $type = 'article';}
 
//url
$url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
 
//記事ページ用
//description
if (is_single()){//単一記事ページの場合
    if(have_posts()): while(have_posts()): the_post();
        $description = mb_substr(get_the_excerpt(), 0, 100);//抜粋を表示
    endwhile; endif;
} 
 
//image
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
//投稿に絵文字等をしている場合等、gif画像を除外する場合
//$searchPattern = '/<img.+src=[\'"]([\-_\.\!\~\*\'\(\)a-z0-9\;\/\?\:@&=\+\$\,\%\#ぁ-んァ-ヶー一-龠]+(jpg|jpeg|png))/iu';
if (is_single()){//単一記事ページの場合
    if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
        $image_id = get_post_thumbnail_id();
        $image = wp_get_attachment_image_src( $image_id, 'full');
        $image_og = $image[0];
        $image_tw = $image[0];
    } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//記事に画像がある場合の処理
        $image_og = $imgurl[2];
        $image_tw = $imgurl[2];
    } 
}
 
?>
<meta property="og:title" content="<?php echo $title;?>">
<meta property="og:type" content="<?php echo $type;?>">
<meta property="og:site_name" content="<?php echo $site_name;?>">
<meta property="og:url" content="<?php echo $url;?>">
<meta property="og:description" content="<?php echo $description;?>">
<meta property="og:image" content="<?php echo $image_og;?>">
<meta property="og:locale" content="<?php echo $locale;?>">
<meta name="twitter:card" content="<?php echo $twitter_card;?>">
<meta name="twitter:site" content="<?php echo $twitter_id;?>">
<meta name="twitter:title" content="<?php echo $title;?>">
<meta name="twitter:description" content="<?php echo $description;?>">
<meta name="twitter:image:src" content="<?php echo $image_tw;?>">

設定ができ公開が完了したら、どのように表示されるか確認してみましょう。
【参考】OGP確認:facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ

About Site

同じことを何度も検索していたりするんで、検索して解決したことを残そうと思いまして。