公開日:2017年8月27日Plusers作成中のWordPressテーマのデモサイトはこちら検索エンジンのクローラーやSNSでの拡散時にサイトの情報を伝えるためには、metaデータを<head>内に適切に記述しておく必要があります。metaデータできちんとサイトの情報をコントロールすることで、SEOにもSNS拡散にも大きな効果が期待できます。サイトの質を高めることができるので、テーマを作成する際は必ず記述しておきましょう。今回は、WordPressの<head>内に記述しておきたいmetaデータの出力方法についてご紹介します。通常のmetaデータOGPタグメタデータを記述する投稿・固定ページ用のメタデータを変数に格納するTOPページやアーカイブページ用のメタデータを変数に格納する変数に格納したメタデータを出力するprefixを設定するnoindexの設定を行うメタタグの出力を確認するサイトアイコン(ウェブクリップアイコンやファビコン)の設定を行うウェブクリップアイコン用の画像を作成するファビコン用の画像を作成するウェブクリップアイコンとファビコンをテーマに反映するheadタグ内の記述サンプルmetaデータとは!?headタグ内に記述するmetaデータはユーザーに情報を伝えるためのものでなく、Googleやfaceookなどのロボットにサイトの情報を適切に伝えるためのデータです。そのため、Webサイト上には直接表示されず、ソースコード上のみに表示されます。Googleや各SNSは、headタグの中に記述されたmetaデータを元にして、検索結果やシェアされたときに表示されるタイトルや説明などのコンテンツを出力します。metaデータは、直接Webサイト上で見られるものではないのですが、ユーザーがサイトに興味を持ち訪問してもらうためにも必要不可欠なものだといえるでしょう。今回出力する各metaデータの名前と説明metaデータには様々な種類があり、それぞれ効果が違います。metaデータについて本記事で追加するものについてそれぞれご紹介します。通常のmetaデータ主に、検索エンジンやブラウザに情報を伝えるためのmetaデータです。title現在のWEBページのタイトルを伝えるためのタグです。Googleなどの検索結果を初め、ブラウザのタブやブックマークした場合の名前にも出力されます。name="description"現在のWEBページの説明を示すテキスト情報を伝えるためのタグです。Googleなどの検索結果の説明欄に出力されます。name="keywords"現在のWEBページのキーワードを伝えるためのタグです。Googleでは、特に重要視されていないようですが、Google以外の検索エンジン対策に設定しておきます。Protcol』の略称で、主にSNS(FacebookボタンやTwietterなど)でシェアされたときに情報を伝えるための要素です。og:typeページの種類を伝えるためのタグです。og:localeWebページが対応している言語を指定するためのタグです。og:title<title>と同じようにページのタイトルを伝えるためのタグです。og:urlWebページのURLを伝えるためのタグです。og:description『name="description"』と同じように、現在のWEBページの説明を示すテキスト情報を伝えるためのタグです。og:image現在のWEBページに設定されているサムネイル画像(イメージ画像)を伝えるためのタグです。『og:image』で指定した画像が、SNSでシェアされた場合に出力されます。指定してない場合は、ページ内からランダムで出力されます。og:site_nameサイトの名前を伝えるためのタグです。メタデータを記述するWordPressのようなCMSの場合は、ページによって出力する内容が変わるので、各ページに対応できるように条件分岐を行いながらmetaデータを出力していきます。今回は、『投稿+固定ページ』とそれ以外のページ(TOPページやアーカイブページなど)で条件分岐して出力内容を変数に格納していき、最後にまとめてmetaデータとして出力します。ページごとの条件分岐についてheadタグ内では、各ページごとの出力について条件分岐をして切り分けます。WordPressでは、現在のページの種類を判別するための関数が設定されているため、それを使って条件分岐を行います。各ページごとに判別するための関数は下記の通りです。?>投稿・固定ページ用のメタデータを変数に格納するheader.phpのheadタグ内に記述※追加する場所は、headタグ内ならどこでも問題ありませんがviewportの下あたりに記述しましょう。}}/*個別ページ以外のメタデータに続く*/投稿と固定ページのmetaデータの中に入れる要素は上記のようになります。各変数の出力方法については、次の通りです。$title投稿や固定ページのタイトルは、『get_the_title()』で取得することができます。$descriptionディスクリプションは、投稿・固定ページの管理画面の『抜粋欄』に記述した内容、無い場合は『本文から120文字』を抜粋して取得します。『抜粋欄』に記述した内容は、『$post->post_excerpt』で取得することができます。メタディスクリプションは、htmlタグや改行タグを除外して出力する必要があるためphp関数『strip_tags』でhtmlタグを除外し、改行も一緒にphp関数『str_replace』を使用して除外しておきましょう。投稿や固定ページの『本文』は、『$post->post_post_content』で取得することができます。抜粋と同様にhtmlタグと改行タグを除外した後に、php関数『mb_strlen』で文字数を計測します。120文字より多い場合は、120文字で文字列をカットし最後に『...』を追加したものを格納しましょう。'';』とし、空文字を変数に代入してください。$keywordsキーワードは、投稿に設定してあるタグを全て取得する処理を行い、カンマ区切りで5つだけを変数に格納します。タグが設定してない場合や固定ページの場合は、空欄になるよう条件分岐をしておきましょう。$page_type投稿や固定ページは、記事を表す『article』を入れます。$page_url投稿や固定ページのURLは、『get_the_permalink()』で取得します。$ogp_imgOGP画像は、サムネイル(アイキャッチ)画像がある場合に、画像までのパス(URL)を挿入します。サムネイル画像の情報は、『wp_get_attachment_image_src(get_post_thumbnail_id(),'full')』でサムネイル(アイキャッチ)画像の情報を配列で取得し、配列の中から取り出したURL情報を変数に格納します。TOPページやアーカイブページ用のメタデータを変数に格納する投稿・固定ページ用のメタデータの直後に挿入する(最後の『}』の直後から改行せずに追加してください。false).'』の記事一覧ページです。false).'』の記事一覧ページです。'『'.get_the_time("Y年").'』に投稿された記事の一覧ページです。'『'.get_the_time("Y年m月").'』に投稿された記事の一覧ページです。'『'.get_the_time("Y年m月d日").'』に投稿された記事の一覧ページです。'『'.$author_name.'』が書いた記事の一覧ページです。get_bloginfo('name');}?>TOPページとアーカイブページのmetaデータの中に入れる要素は上記のようになります。タイトルやディスクリプションは、各アーカイブページごとに適切に出力されるように、条件分岐を行い細かく指定しましょう。各変数の出力方法については、次の通りです。記事一覧』という文言を格納します。『の記事一覧』の部分は、自分の好きな文言に変更してください。$descriptionディスクリプションは、各アーカイブページごとに条件分岐を行います。指定した文言』を格納します。$keywordsキーワードは、サイトに設定しているカテゴリーを全て取得する処理を行い、カンマ区切りで5つ変数に格納します。カテゴリーを設定してない場合や固定ページの場合は、空欄になるよう条件分岐をしておきましょう。$page_typeTOPページやアーカイブページは、WEBサイトであることを表す『website』を入れます。$page_urlページのURLは、PHPで現在のURLを取得して格納します。$ogp_img画像は、すべての条件分岐が終了した後(条件分岐の閉じタグの後)に記述します。』という条件分岐を追加し、今までの条件分岐の中で画像($ogp_img)に値が格納されていない場合に、サイト全体に共通するサムネイル画像を格納するようにします。上記で格納するサイト全体に共通するサムネイル画像を作成し、WordPress内に追加してください。デモでは、テーマの中のimagesフォルダの中に『ogp_img.jpg』という画像を新たに追加しています。$output_title<title>タグに挿入するタイトルを$titleとは別に、$output_titleという変数を作成して値を格納します。サイトのディスクリプション』という形になるように値を作成しましょう。get_bloginfo('name');』を追加してください。変数に格納したメタデータを出力する上記の記述では、metaデータを変数に格納しただけなのでまだソースコード上では出力されません。格納した変数を出力するための処理を、上記で記述した条件分岐の下に追加しましょう。?>">変数に格納した各情報を、各メタデータの形式に合わせて出力します。prefixを設定するSNS用のOGPタグを適切に出力するためには、prefixを記述しておく必要があります。無くても大丈夫らしいのですが、念のために記述しておきましょう。prefixは、headタグの開始タグに組み込みます。http://ogp.me/ns#">noindexの設定を行うnoindexとは、Googleなどの検索エンジンに対して「このページは登録しなくても大丈夫です」と伝えることができる設定です。検索エンジンに登録されないだけで、クローラーの巡回は通常通り行われます。WordPressなどのCMSを使ってサイトを作成した場合、トップページやカテゴリページ・タグページ・アーカイブページ・検索ページなどのページが自動生成されます。(主にindex.phpベースのページです。)Googleからは、WordPressなどのCMSによる自動生成コンテンツは適切に処理するとアナウンスされてはいますが、万が一を考え自動生成ページが重複コンテンツとして扱われ、サイトの評価を防ぐために『noindex』の設定を適切に行っておきましょう。今回は、『タグページ』『アーカイブページ』『検索結果ページ』『404ページ』の4つのページをnoindexとして処理します。カテゴリページに関しては賛否両論ありますが、noindexにせずそのままにしておきます。』でまとめて、各一覧ページの条件分岐をしています。phpで『||』は、「または(or)」という意味です。上記の書き方ではなく、『if』『elseif』を使って条件分岐をしても問題ありません。content="noindex,nofollow">』とすると、リンクをクローラーが巡回しないようにすることもできます。ページ内のリンクも巡回しなくなってしまうので今回は設定していませんが、状況に応じて使い分けてください。メタタグの出力を確認する上記をheadタグ内に追加したら、metaタグかheadタグ内にきちんと出力されているかをブラウザで確認してみましょう。ページのソースを表示(Chormeの場合)でチェックすると見やすいかと思います。条件分岐している各ページを確認し、意図した通りに出力されているかを確認してください。metaタグの出力チェックが完了したら、facebookデバッカーでOGPタグの内容がきちんと反映されるか確認しましょう。facebookデバッカーは、サイトがローカル環境にある場合は使用できません。本番環境でチェックしてください。https://developers.facebook.com/tools/debug/facebookデバッカーに接続したら、ブログ内の適当なページのURLを入力してください。上記の画像のように、OGPタグがきちんと反映されていれば問題なく認識されています。TwitterカードのOGPタグの設定を行うTwitterカードを使用するには、基本的な情報はOGPからのデータを読み込みますが、Twitterカード専用の記述を追加する必要があります。?>">上記の5行をopgタグを出力するための記述の後に追加しましょう。『@Twitterのユーザー名』には、twitterカードとして出力したいサイトのtwitterのユーザー名を入力してください。Twitterカード用のmetaデータのcontentの値は、他のOGPタグのものと同じでname部分を変更したものを追加します。headタグ内への記述が完了したら、Twitterカードを利用するためにサイト申請を行い承認を受ける必要があります。Twitterカードの申請は、サイトがローカル環境にある場合は使用できません。本番環境でチェックしてください。https://cards-dev.twitter.com/validator上記のサイトにアクセスしたらURLの入力画面が表示されますので、Twitterカードの申請を行います。card』をクリックして確認しましょう。無事に登録されれば、Twitterカードの設定は終了です。サイトアイコン(ウェブクリップアイコンやファビコン)の設定を行うアイコンの設定をすることでサイトが印象に残りやすくなり、サイトのブランド力や認知度の向上が期待できます。ウェブクリップアイコン(スマートフォンのホーム画面にブックマークされたときに表示されるアイコン)とファビコン(ブラウザのタブに表示されるアイコン)を設定していきます。WordPressの管理画面からも設定できますが、一部反映されない場合があるようなので、テーマ側で設定しておくことをオススメします。ウェブクリップアイコン用の画像を作成するまずは、ウェブクリップアイコン(スマートフォンのホーム画面にブックマークされたときに表示されるアイコン)を用意しましょう。ウェブクリップアイコンは、iphone用とアンドロイド用の2種類を作成します。256px』以上の正方形の画像を作成してください。作成が完了したら、iphone用とアンドロイド用にそれぞれリサイズして書き出しましょう。180px』の正方形画像を『apple-touch-icon』という名前のPNG画像で作成してください。256px』の正方形画像を『android-chrome』という名前のPNG画像で作成してください。ファビコン用の画像を作成するファビコン(ブラウザのタブに表示されるアイコン)は、ウェブクリップアイコンをベースにアイコン画像(.ico)に変換して作成します。icoという拡張子に対応しているソフトは少ないため、今回はWebサイトを使ってWEB上で変換します。http://app.tree-web.net/icon_converter/アイコンコンバータにアクセスしたら、先程作成した正方形の画像を選択し『変換』ボタンをクリックしてください。32』サイズの画像を『Download』ボタンより保存しましょう。保存するときは、ファイルの名前を『favicon.ico』という名前に変更して保存してください。※保存後に変更でも可ウェブクリップアイコンとファビコンをテーマに反映するまず最初に、作成した『android-chrome.png』『apple-touch-icon.png』『favicon.ico』の3枚の画像をWordPress上にアップロードします。デモでは、WordPressテーマの中の『images』フォルダ内アップロードしていますが、WordPressテーマフォルダの中か管理画面からアクセスした『メディア』の中であればどちらでも構いません。自分の管理しやすい場所にアップロードしてください。画像のアップロードが完了したら、headタグ内にスマホのアイコン用の記述を行います。※デモでは、スタイルシートを読み込む記述の下に記述しています。?>/images/android-chrome.png">headタグ内に記述したら、設定は完了です。ローカルもしくはテーマをアップしているサイトで画像がきちんと表示されているか確認しましょう。headタグ内の記述サンプルheadタグ内の記述は、少々複雑な部分も多くわかりずらい箇所もあったかと思いますので、下記にサンプルコードを記述しておきます。false).'』の記事一覧ページです。false).'』の記事一覧ページです。'『'.get_the_time("Y年").'』に投稿された記事の一覧ページです。'『'.get_the_time("Y年m月").'』に投稿された記事の一覧ページです。'『'.get_the_time("Y年m月d日").'』に投稿された記事の一覧ページです。'『'.$author_name.'』が書いた記事の一覧ページです。?><!--システム・プラグイン用--></head>以上で、header.php内のheadタグ内の記述は全て完了です。今回記述したもの以外にも、必要性に合わせてheadタグ内にデータを追加していき、ロボットに適切な情報を伝えることでサイトの上位表示に繋げることができますよ!次回は、今作成済みのテンプレートをさらに分岐したり、条件分岐を追加したりして、WordPressテーマを仕上げる方法についてご紹介します。下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。