2017年7月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;?>">
設定ができ公開が完了したら、どのように表示されるか確認してみましょう。
■Facebook デバッガー
https://developers.facebook.com/tools/debug/
※Facebookへのログインが必要です。
■Twitter Card validator
https://cards-dev.twitter.com/validator
※Twitterへのログインが必要です。
関連記事
-
【WordPressプラグイン】All in One SEO Pack使用中にテンプレート内でタイトルやディスクリプションを変更する方法
【WordPressプラグイン】All in One SEO Pack使用中にテンプレート内でタイトルやディスクリプションを変更する方法
SEO対策には欠かせないWordPressプラグイン「All in One SEO Pack」。 特定のページ(テンプレ・・・ -
【WordPress】優先度付きのサムネイル画像の表示方法(アイキャッチ・記事の最初の画像)
【WordPress】優先度付きのサムネイル画像の表示方法(アイキャッチ・記事の最初の画像)
WordPressで記事のサムネイル画像を表示したいとき、アイキャッチがあれば、アイキャッチを表示、なければ記事の最初の・・・ -
【WordPressプラグイン】「WordPress Popular Posts」をカスタマイズして出力する方法
【WordPressプラグイン】「WordPress Popular Posts」をカスタマイズして出力する方法
人気記事を表示できるプラグイン「Wordpress Popular Posts」。 固定ページやシングルページにソースを・・・ -
【WordPressプラグイン】「Smart Custom Fields」で繰り返し設定した項目や画像を出力する方法
【WordPressプラグイン】「Smart Custom Fields」で繰り返し設定した項目や画像を出力する方法
カスタムフィールドで繰り返し登録したい項目があるとき等に便利なプラグイン「Smart Custom Fields」 繰り・・・ -
【WordPress】ページの条件分岐
【WordPress】ページの条件分岐
WordPressには様々な種類のページタイプがあるので、そのページタイプによる条件分岐のメモメモ。 ▼ホーム判定(2ペ・・・ -
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
【WordPressプラグイン】「EWWW Image Optimizer」で使用する画像を自動で圧縮・リサイズ
WordPressで画像を登録する際に毎回リサイズが面倒だったり、必要以上の画像サイズで登録されてしまったりとするケース・・・