WordPressのメタとOGP設定を自動化にして整理してみた。
こんにちは、コーダーのあべです。
WordPressのヘッダーが分岐だらけでごちゃって気になることはないですか？
普通とっちらからないと言われそうですが、
- SEO対策のために「title」「keywords」「description」等をページごとに変えているので分岐している。
- ページごとに、OGPのイメージを変えているので、分岐している。
等の処置を入れていると、たくさん分岐の記述をしないといけません。
SEOのプラグインを使えば早いのですが、テンプレによっては合わない事もあります。
そこで、自動生成に手を加えて自分で対策してみたのでご紹介しようと思います。
目次
カスタムフィールドの設定
下準備としてカスタムフィールドの設定をおこないます。
自分は導入が楽なので、いつもACFを利用しています。
（Export to XMLでよく使うカスタムフィールドは管理できるのが便利です。
SEO用、ニュース系用等を自分のライブラリーとして保管しています。）
今回は、keywordsと、descriptionを固定ページと投稿ページに設定します。
（新しいWordPressのバージョンになってからタイトルの分岐はfunction.phpに記載して吐き出しを変える必要があるので、今回は説明から省きます。）
OGP用のimageにサムネイルを使用するので説明も追記します。
（サムネイルを別で管理したい場合は、OGP画像用のフィールドを作成してください。）
デフォルトのkeywordsと、descriptionを決めておきます。
（自分は、デフォルトのdescriptionは、WPの設定 > 一般のキャッチフレーズに記載して呼び出しています）
自動生成用のコード
では、自分が書いたソースを公開します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<?php //カスタムフィールドを呼び出し $custom_fields = get_post_custom(); $keywords = $custom_fields['keywords']; $description = $custom_fields['description']; //og:typeの分岐 TOPページのみwebsite if(is_home() || is_front_page()) { $og_type = "website"; }else{ $og_type = "article"; } //ページに入力があった場合は、そのメタを呼び出し入れる。 if($description[0]){$og_description = $description[0];} if($keywords[0]){$og_keywords = $keywords[0];} if(is_home() || is_front_page()) { $og_title = get_bloginfo( 'name' ); $og_pageURL = get_the_permalink(); $og_description = get_bloginfo( 'description' ); $og_keywords = "【TOPに設定したいkeywords】"; }elseif(is_singular()){ $og_title = get_the_title(); $og_pageURL = get_the_permalink(); }elseif(is_page()){ //固定ページ $og_title = get_the_title(); $og_pageURL = get_the_permalink(); }elseif(is_category() || is_archive()){ //一覧 $cat_name = single_cat_title( '', false); $cat_id = get_cat_ID( $cat_name ); $og_title = get_the_archive_title().'一覧'; $og_pageURL = get_category_link($cat_id); $og_description = '「'.$cat_name.'」一覧ページです。'.get_bloginfo( 'description' ); $og_keywords = $cat_name."なにの一覧ページかのkeywordsあれば"; } //なにもない場合は、デフォルトを入れる //descriptionの設定 if(!$og_description){$og_description = get_the_title()."のページです。".get_bloginfo( 'description' );} //keywordsの設定 if(!$og_keywords){$og_keywords = "【デフォルトで設定したいkeywords】";} /* OGP_img */ if (has_post_thumbnail() && !is_archive() && !is_category()){ //投稿にサムネイルがある場合の処理 $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src( $image_id, 'full'); $img_url = $image[0]; $ogimageURL = $image[0]; } else { //投稿にサムネイルが無い場合の処理 $ogp_image = get_template_directory_uri().'/assets/img/common/ogp.jpg'; $ogimageURL = $ogp_image; } preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $results ); ?> <meta name="keywords" content="<?php echo $og_keywords; ?>"> <meta name="description" content="<?php echo $og_description; ?>"> <!--==== OGP === --> <meta property="og:url" content="<?php echo $og_pageURL; ?>" /> <meta property="og:type" content="<?php echo $og_type; ?>" /> <?php if(is_home() || is_front_page()) { ?> <meta property="og:title" content="<?php echo $og_title; ?>" /> <?php }else{?> <meta property="og:title" content="<?php echo $og_title; ?>" /> <?php }?> <meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>" /> <meta property="og:image" content="<?php echo $ogimageURL; ?>" > <!--==== Twitter Card === --> <meta name="twitter:card" content="カードの種類 例）summary_large_image"> <meta name="twitter:site" content="WebサイトのTwitterID"> <meta name="twitter:creator" content="コンテンツ作成者のTwitterID"> <meta name="twitter:title" content="<?php echo $og_title; ?>｜<?php bloginfo( 'name' ) ?>"> <meta name="twitter:description" content="<?php echo $og_description; ?>"> <meta name="twitter:domain" content="<?php echo $results[1] ?>"> <meta property="article:publisher" content="【Webサイトに紐づく Facebook ページを設定】"> <!-- /OGP Card --> |
※こちらのソースコードは自己責任でご利用ください。
なにをやっているのか
上記では毎回、項目毎に同じ分岐を書いていたのを整理しています。
（たとえばdescription と、og: descriptionは同じ記載なので、同じ分岐を書く必要がでてきます。それは嫌なので、まず分岐を先に書いて関数に出したいものを入れ、後ほど出力します。）
分岐の内容は、
カスタムフィールドでkeywords、descriptionが入っていないか確認。
入っていない場合は、デフォルトに設定した値が入る様にします。
（投稿によってデフォルトの出力を変えたい等がある場合はページ分岐を入れましょう。）
サムネイル（またはOGP画像）が設定されていないか確認。
設定がない場合はデフォルトのOGP画像が出る様にする。
OGPのために必要なものを記載。
（ツイッターカードの大きさ分岐、ツイッターID、Facebookの設定等）
最後に全部をまとめて吐き出し。
これを、このままヘッターに貼ってもいいのですが、自分はテンプレパーツとして読み込める様にいつもしています。
これでスッキリしました。
固定ページ毎、投稿ページ毎に分岐を書く必要がなくなりました。
ページのメタを変えたい場合は、テンプレを開かずにWPから対応が可能です。
自分で使いやすい様に、カスタマイズして利用してみてください。
（h1、titleフィールド、noindex分岐用のブラグ等も入れると便利かもです。）
ソースコードの利用について
こちらのソースコードは自己責任でご利用ください。
記事を書いた人
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。
コード打って、オタ活して、3人の子育てママして、奥さんしてる書けないくらいclass属性だけは多いコーダーです。