検索エンジンのクローラーやSNSでの拡散時にサイトの情報を伝えるためには、metaデータを<head>内に適切に記述しておく必要があります。
metaデータできちんとサイトの情報をコントロールすることで、SEOにもSNS拡散にも大きな効果が期待できます。サイトの質を高めることができるので、テーマを作成する際は必ず記述しておきましょう。
今回は、WordPressの<head>内に記述しておきたいmetaデータの出力方法についてご紹介します。
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以外の検索エンジン対策に設定しておきます。
OGPタグ
OGPは『Open Graph Protcol』の略称で、主にSNS(FacebookボタンやTwietterなど)でシェアされたときに情報を伝えるための要素です。
og:type
ページの種類を伝えるためのタグです。
og:locale
Webページが対応している言語を指定するためのタグです。
og:title
<title>と同じようにページのタイトルを伝えるためのタグです。
og:url
WebページのURLを伝えるためのタグです。
og:description
『name="description"』と同じように、現在のWEBページの説明を示すテキスト情報を伝えるためのタグです。
og:image
現在のWEBページに設定されているサムネイル画像(イメージ画像)を伝えるためのタグです。『og:image』で指定した画像が、SNSでシェアされた場合に出力されます。指定してない場合は、ページ内からランダムで出力されます。
og:site_name
サイトの名前を伝えるためのタグです。
メタデータを記述する
WordPressのようなCMSの場合は、ページによって出力する内容が変わるので、各ページに対応できるように条件分岐を行いながらmetaデータを出力していきます。
今回は、『投稿+固定ページ』とそれ以外のページ(TOPページやアーカイブページなど)で条件分岐して出力内容を変数に格納していき、最後にまとめてmetaデータとして出力します。
ページごとの条件分岐について
headタグ内では、各ページごとの出力について条件分岐をして切り分けます。WordPressでは、現在のページの種類を判別するための関数が設定されているため、それを使って条件分岐を行います。
各ページごとに判別するための関数は下記の通りです。
TOPページ
<?php if(is_home() || is_front_page() ) { ～ } ?>投稿
<?php if(is_single() ) { ～ } ?>固定ページ
<?php if(is_page() ) { ～ } ?>アーカイブ
<?php if(is_archive() ) { ～ } ?>カテゴリ一覧
<?php if(is_category() ) { ～ } ?>タグ
<?php if(is_tag() ) { ～ } ?>年,月,日,時間
<?php if(is_date() ) { ～ } ?>検索結果
<?php if(is_search() ) { ～ } ?>404
<?php if(is_404() ) { ～ } ?>投稿・固定ページ用のメタデータを変数に格納する
header.phpのheadタグ内に記述※追加する場所は、headタグ内ならどこでも問題ありませんがviewportの下あたりに記述しましょう。<?php
if( is_single() && !is_home() || is_page() && !is_front_page()) {
//タイトル
$title = get_the_title();
//ディスクリプション
if(!empty($post->post_excerpt)) {
$description = str_replace(array("\r\n", "\r", "\n", " "), '', strip_tags($post->post_excerpt));
} elseif(!empty($post->post_content)) {
$description = str_replace(array("\r\n", "\r", "\n", " "), '', strip_tags($post->post_content));
$description_count = mb_strlen($description, 'utf8');
if($description_count > 120) {
$description = mb_substr($description, 0, 120, 'utf8').'…';
}
} else {
$description = '';
}
//キーワード
if (has_tag()) {
$tags = get_the_tags();
$kwds = array();
$i = 0;
foreach($tags as $tag){
$kwds[] = $tag->name;
if($i === 4) {
break;
}
$i++;
}
$keywords = implode(',',$kwds);
} else {
$keywords = '';
}
//ページタイプ
$page_type = 'article';
//ページURL
$page_url = get_the_permalink();
//OGP用画像
if(!empty(get_post_thumbnail_id())) {
$ogp_img_data = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');
$ogp_img = $ogp_img_data[0];
}
}/*個別ページ以外のメタデータに続く*/投稿と固定ページの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文字で文字列をカットし最後に『…』を追加したものを格納しましょう。
それ以外の場合（『抜粋欄』『本文』が両方ともない場合）は、エラー防止のために『$description = '';』とし、空文字を変数に代入してください。
$keywords
キーワードは、投稿に設定してあるタグを全て取得する処理を行い、カンマ区切りで5つだけを変数に格納します。また、タグが設定してない場合や固定ページの場合は、空欄になるよう条件分岐をしておきましょう。
$page_type
投稿や固定ページは、記事を表す『article』を入れます。
$page_url
投稿や固定ページのURLは、『get_the_permalink()』で取得します。
$ogp_img
OGP画像は、サムネイル(アイキャッチ)画像がある場合に、画像までのパス(URL)を挿入します。サムネイル画像の情報は、『wp_get_attachment_image_src(get_post_thumbnail_id(),'full')』でサムネイル(アイキャッチ)画像の情報を配列で取得し、配列の中から取り出したURL情報を変数に格納します。
TOPページやアーカイブページ用のメタデータを変数に格納する
投稿・固定ページ用のメタデータの直後に挿入する(最後の『}』の直後から改行せずに追加してください。)else { //ループのページ(home・カテゴリー・タグなど)
//先に投稿・固定ページ以外の詳細な条件分岐
if(is_category()) {
$title = single_cat_title("", false).'の記事一覧';
if(!empty(category_description())) {
$description = strip_tags(category_description());
} else {
$description = 'カテゴリー『'.single_cat_title("", false).'』の記事一覧ページです。';
}
} elseif(is_tag()) {
$title = single_cat_title("", false).'の記事一覧';
if(!empty(tag_description())) {
$description = strip_tags(tag_description());
} else {
$description = 'タグ『'.single_cat_title("", false).'』の記事一覧ページです。';
}
} elseif(is_year()) {
$title = get_the_time("Y年").'の記事一覧';
$description = '『'.get_the_time("Y年").'』に投稿された記事の一覧ページです。';//指定したい場合は個別に入力
} elseif(is_month()) {
$title = get_the_time("Y年m月").'の記事一覧';
$description = '『'.get_the_time("Y年m月").'』に投稿された記事の一覧ページです。';//指定したい場合は個別に入力
} elseif(is_day()) {
$title = get_the_time("Y年m月d日").'の記事一覧';
$description = '『'.get_the_time("Y年m月d日").'』に投稿された記事の一覧ページです。';//指定したい場合は個別に入力
} elseif(is_author()) {
$author_id = get_query_var('author');
$author_name = get_the_author_meta( 'display_name', $author_id );
$title = $author_name.'が投稿した記事一覧';
$description = '『'.$author_name.'』が書いた記事の一覧ページです。';
} else {
$title = '';
$description = get_bloginfo( 'description' );
}
//キーワード
$allcats = get_categories();
if(!empty($allcats)) {
$kwds = array();
$i = 0;
foreach($allcats as $allcat) {
$kwds[] = $allcat->name;
if($i === 4) {
break;
}
$i++;
}
$keywords = implode( ',',$kwds );
} else {
$keywords = '';
}
//ページタイプ
$page_type = 'website';
//ページURL
$http = is_ssl() ? 'https'.'://' : 'http'.'://';
$page_url = $http.$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
}
//OGP用画像
if(empty($ogp_img)) {
$ogp_img = get_template_directory_uri().'/images/ogp_img.jpg';//サイト全てに共通の画像へのパス
}
//タイトル
if(!empty($title)) {
$output_title = $title.' | '.get_bloginfo('name');
} else {
$title = get_bloginfo('name');
$output_title = get_bloginfo('name');
}
?>TOPページとアーカイブページのmetaデータの中に入れる要素は上記のようになります。タイトルやディスクリプションは、各アーカイブページごとに適切に出力されるように、条件分岐を行い細かく指定しましょう。各変数の出力方法については、次の通りです。
$title
タイトルは、各アーカイブページごとに条件分岐を行い、『表示している投稿の種類 + の記事一覧』という文言を格納します。『の記事一覧』の部分は、自分の好きな文言に変更してください。
$description
ディスクリプションは、各アーカイブページごとに条件分岐を行います。カテゴリーページとタグページは、『管理画面 > 投稿 > カテゴリーまたはタグ > 説明』に記述した内容、カテゴリ・タグの説明がないときやそれ以外のページでは『表示している投稿の種類 + 指定した文言』を格納します。
$keywords
キーワードは、サイトに設定しているカテゴリーを全て取得する処理を行い、カンマ区切りで5つ変数に格納します。また、カテゴリーを設定してない場合や固定ページの場合は、空欄になるよう条件分岐をしておきましょう。
$page_type
TOPページやアーカイブページは、WEBサイトであることを表す『website』を入れます。
$page_url
ページのURLは、PHPで現在のURLを取得して格納します。
$ogp_img
画像は、すべての条件分岐が終了した後(条件分岐の閉じタグの後)に記述します。『if(empty($ogp_img)) { ～ } 』という条件分岐を追加し、今までの条件分岐の中で画像($ogp_img)に値が格納されていない場合に、サイト全体に共通するサムネイル画像を格納するようにします。
上記で格納するサイト全体に共通するサムネイル画像を作成し、WordPress内に追加してください。デモでは、テーマの中のimagesフォルダの中に『ogp_img.jpg』という画像を新たに追加しています。
$output_title
<title>タグに挿入するタイトルを$titleとは別に、$output_titleという変数を作成して値を格納します。
『if(!empty($title)) {～} else {～}』という条件分岐を追加し、変数($title)に値がある場合は『ページのタイトル | サイトのタイトル』、ない場合は『サイトのタイトル | サイトのディスクリプション』という形になるように値を作成しましょう。
同時に、$titleが空の場合は、$titleにサイトのタイトルを格納するように『$title = get_bloginfo('name');』を追加してください。
変数に格納したメタデータを出力する
上記の記述では、metaデータを変数に格納しただけなのでまだソースコード上では出力されません。格納した変数を出力するための処理を、上記で記述した条件分岐の下に追加しましょう。
header.phpのmetaデータを変数に格納する処理の下に追加<title><?php echo $output_title; ?></title>
<meta name="description" content="<?php echo $description; ?>">
<meta name="keywords" content="<?php echo $keywords; ?>">
<meta property="og:type" content="<?php echo $page_type; ?>">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="<?php echo $title; ?>">
<meta property="og:url" content="<?php echo $page_url; ?>">
<meta property="og:description" content="<?php echo $description; ?>">
<meta property="og:image" content="<?php echo $ogp_img; ?>">
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">変数に格納した各情報を、各メタデータの形式に合わせて出力します。
prefixを設定する
SNS用のOGPタグを適切に出力するためには、prefixを記述しておく必要があります。無くても大丈夫らしいのですが、念のために記述しておきましょう。prefixは、headタグの開始タグに組み込みます。
header.phpの<head>に追記<head prefix="og: http://ogp.me/ns#">noindexの設定を行う
noindexとは、Googleなどの検索エンジンに対して「このページは登録しなくても大丈夫です」と伝えることができる設定です。検索エンジンに登録されないだけで、クローラーの巡回は通常通り行われます。
WordPressなどのCMSを使ってサイトを作成した場合、トップページやカテゴリページ・タグページ・アーカイブページ・検索ページなどのページが自動生成されます。（主にindex.phpベースのページです。）
Googleからは、WordPressなどのCMSによる自動生成コンテンツは適切に処理するとアナウンスされてはいますが、万が一を考え自動生成ページが重複コンテンツとして扱われ、サイトの評価を防ぐために『noindex』の設定を適切に行っておきましょう。
今回は、『タグページ』『アーカイブページ』『検索結果ページ』『404ページ』の4つのページをnoindexとして処理します。カテゴリページに関しては賛否両論ありますが、noindexにせずそのままにしておきます。
header.phpのheadタグ内に記述<?php if(is_tag() || is_date() || is_search() || is_404()) : ?>
<meta name="robots" content="noindex">
<?php endif; ?>上記の記述は『if(is_tag() || is_archive())』というように『 || 』でまとめて、各一覧ページの条件分岐をしています。
phpで『||』は、「または(or)」という意味です。
上記の書き方ではなく、『if』『elseif』を使って条件分岐をしても問題ありません。
noindexと一緒にnofollow()も追加して『<meta name="robots" content="noindex,nofollow">』とすると、リンクをクローラーが巡回しないようにすることもできます。ページ内のリンクも巡回しなくなってしまうので今回は設定していませんが、状況に応じて使い分けてください。
メタタグの出力を確認する
上記をheadタグ内に追加したら、metaタグかheadタグ内にきちんと出力されているかをブラウザで確認してみましょう。
metaタグはデベロッパーツールでもチェックすることができますが、ブラウザ上で右クリック → ページのソースを表示(Chormeの場合)でチェックすると見やすいかと思います。
条件分岐している各ページを確認し、意図した通りに出力されているかを確認してください。metaタグの出力チェックが完了したら、facebookデバッカーでOGPタグの内容がきちんと反映されるか確認しましょう。
facebookデバッカーは、サイトがローカル環境にある場合は使用できません。必ず本番環境でチェックしてください。
facebookデバッカーに接続したら、ブログ内の適当なページのURLを入力してください。
上記の画像のように、OGPタグがきちんと反映されていれば問題なく認識されています。
TwitterカードのOGPタグの設定を行う
Twitterカードを使用するには、基本的な情報はOGPからのデータを読み込みますが、Twitterカード専用の記述を追加する必要があります。
header.phpのheadタグ内のmetaデータを出力する箇所の後に記述<meta name="twitter:site" content="@Twitterのユーザー名">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@Twitterのユーザー名">
<meta name="twitter:description" content="<?php echo $description; ?>">
<meta name="twitter:image:src" content="<?php echo $ogp_img; ?>">上記の5行をopgタグを出力するための記述の後に追加しましょう。『@Twitterのユーザー名』には、twitterカードとして出力したいサイトのtwitterのユーザー名を入力してください。
Twitterカード用のmetaデータのcontentの値は、他のOGPタグのものと同じでname部分を変更したものを追加します。
headタグ内への記述が完了したら、Twitterカードを利用するためにサイト申請を行い承認を受ける必要があります。
Twitterカードの申請は、サイトがローカル環境にある場合は使用できません。必ず本番環境でチェックしてください。
上記のサイトにアクセスしたらURLの入力画面が表示されますので、Twitterカードの申請を行います。
どこかサイトの適当な投稿ページのURLを入力し『Preview card』をクリックして確認しましょう。無事に登録されれば、Twitterカードの設定は終了です。
サイトアイコン(ウェブクリップアイコンやファビコン)の設定を行う
アイコンの設定をすることでサイトが印象に残りやすくなり、サイトのブランド力や認知度の向上が期待できます。デモでは、 ウェブクリップアイコン(スマートフォンのホーム画面にブックマークされたときに表示されるアイコン)とファビコン(ブラウザのタブに表示されるアイコン)を設定していきます。
WordPressの管理画面からも設定できますが、一部反映されない場合があるようなので、テーマ側で設定しておくことをオススメします。
ウェブクリップアイコン用の画像を作成する
まずは、ウェブクリップアイコン(スマートフォンのホーム画面にブックマークされたときに表示されるアイコン)を用意しましょう。ウェブクリップアイコンは、iphone用とアンドロイド用の2種類を作成します。
まずは、『256px × 256px』以上の正方形の画像を作成してください。
作成が完了したら、iphone用とアンドロイド用にそれぞれリサイズして書き出しましょう。
iphone用は『180px × 180px』の正方形画像を『apple-touch-icon』という名前のPNG画像で作成してください。
アンドロイド用は『256px × 256px』の正方形画像を『android-chrome』という名前のPNG画像で作成してください。
ファビコン用の画像を作成する
ファビコン(ブラウザのタブに表示されるアイコン)は、ウェブクリップアイコンをベースにアイコン画像（.ico)に変換して作成します。icoという拡張子に対応しているソフトは少ないため、今回はWebサイトを使ってWEB上で変換します。
アイコンコンバータにアクセスしたら、先程作成した正方形の画像を選択し『変換』ボタンをクリックしてください。
変換が完了したら変換された画像が一覧で表示されますので、アイコン形式一覧の画像の『Pixel : 32 x 32』サイズの画像を『Download』ボタンより保存しましょう。
保存するときは、ファイルの名前を『favicon.ico』という名前に変更して保存してください。
※保存後に変更でも可
ウェブクリップアイコンとファビコンをテーマに反映する
まず最初に、作成した『android-chrome.png』『apple-touch-icon.png』『favicon.ico』の3枚の画像をWordPress上にアップロードします。
デモでは、WordPressテーマの中の『images』フォルダ内アップロードしていますが、WordPressテーマフォルダの中か管理画面からアクセスした『メディア』の中であればどちらでも構いません。自分の管理しやすい場所にアップロードしてください。
画像のアップロードが完了したら、headタグ内にスマホのアイコン用の記述を行います。
header.phpのheadタグ内に記述※デモでは、スタイルシートを読み込む記述の下に記述しています。
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png">
<link rel="icon" type="image/png" size="256x256" href="<?php echo get_template_directory_uri(); ?>/images/android-chrome.png">headタグ内に記述したら、設定は完了です。ローカルもしくはテーマをアップしているサイトで画像がきちんと表示されているか確認しましょう。
headタグ内の記述サンプル
headタグ内の記述は、少々複雑な部分も多くわかりずらい箇所もあったかと思いますので、下記にサンプルコードを記述しておきます。ぜひ参考にしてください。
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8"><!--エンコードがUTF-8であることを指定-->
<meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--viewportの設定-->
<!--noindexの設定-->
<?php if(is_tag() || is_date() || is_search() || is_404()) : ?>
<meta name="robots" content="noindex">
<?php endif; ?>
<!--メタタグに出力する内容を変数に格納-->
<?php
if( is_single() && !is_home() || is_page() && !is_front_page()) {
//タイトル
$title = get_the_title();
//ディスクリプション
if(!empty($post->post_excerpt)) {
$description = str_replace(array("\r\n", "\r", "\n", " "), '', strip_tags($post->post_excerpt));
} elseif(!empty($post->post_content)) {
$description = str_replace(array("\r\n", "\r", "\n", " "), '', strip_tags($post->post_content));
$description_count = mb_strlen($description, 'utf8');
if($description_count > 120) {
$description = mb_substr($description, 0, 120, 'utf8').'…';
}
} else {
$description = '';
}
//キーワード
if (has_tag()) {
$tags = get_the_tags();
$kwds = array();
$i = 0;
foreach($tags as $tag){
$kwds[] = $tag->name;
if($i === 4) {
break;
}
$i++;
}
$keywords = implode(',',$kwds);
} else {
$keywords = '';
}
//ページタイプ
$page_type = 'article';
//ページURL
$page_url = get_the_permalink();
//OGP用画像
if(!empty(get_post_thumbnail_id())) {
$ogp_img_data = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');
$ogp_img = $ogp_img_data[0];
}
} else { //ループのページ(home・カテゴリ・タグなど)
//先に投稿・固定ページ以外の詳細な条件分岐
if(is_category()) {
$title = single_cat_title("", false).'の記事一覧';
if(!empty(category_description())) {
$description = strip_tags(category_description());
} else {
$description = 'カテゴリー『'.single_cat_title("", false).'』の記事一覧ページです。';
}
} elseif(is_tag()) {
$title = single_cat_title("", false).'の記事一覧';
if(!empty(tag_description())) {
$description = strip_tags(tag_description());
} else {
$description = 'タグ『'.single_cat_title("", false).'』の記事一覧ページです。';
}
} elseif(is_year()) {
$title = get_the_time("Y年").'の記事一覧';
$description = '『'.get_the_time("Y年").'』に投稿された記事の一覧ページです。';//指定したい場合は個別に入力
} elseif(is_month()) {
$title = get_the_time("Y年m月").'の記事一覧';
$description = '『'.get_the_time("Y年m月").'』に投稿された記事の一覧ページです。';//指定したい場合は個別に入力
} elseif(is_day()) {
$title = get_the_time("Y年m月d日").'の記事一覧';
$description = '『'.get_the_time("Y年m月d日").'』に投稿された記事の一覧ページです。';//指定したい場合は個別に入力
} elseif(is_author()) {
$author_id = get_query_var('author');
$author_name = get_the_author_meta( 'display_name', $author_id );
$title = $author_name.'が投稿した記事一覧';
$description = '『'.$author_name.'』が書いた記事の一覧ページです。';
} else {
$title = '';
$description = get_bloginfo( 'description' );
}
//キーワード
$allcats = get_categories();
if(!empty($allcats)) {
$kwds = array();
$i = 0;
foreach($allcats as $allcat) {
$kwds[] = $allcat->name;
if($i === 4) {
break;
}
$i++;
}
$keywords = implode( ',',$kwds );
} else {
$keywords = '';
}
//ページタイプ
$page_type = 'website';
//ページURL
$http = empty($_SERVER['HTTPS']) ? 'http://' : 'https://';
$page_url = $http.$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
}
//OGP用画像
if(empty($ogp_img)) {
$ogp_img = get_template_directory_uri().'/images/ogp_img.jpg';//サイト全てに共通の画像へのパス
}
//タイトル
if(!empty($title)) {
$output_title = $title.' | '.get_bloginfo('name');
} else {
$title = get_bloginfo('name');
$output_title = get_bloginfo('name');
}
?>
<!--メタデータをHTML上に出力-->
<title><?php echo $output_title; ?></title>
<meta name="description" content="<?php echo $description; ?>">
<meta name="keywords" content="<?php echo $keywords; ?>">
<meta property="og:type" content="<?php echo $page_type; ?>">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="<?php echo $title; ?>">
<meta property="og:url" content="<?php echo $page_url; ?>">
<meta property="og:description" content="<?php echo $description; ?>">
<meta property="og:image" content="<?php echo $ogp_img; ?>">
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">
<!-- <meta name="twitter:site" content="@twitterアカウント">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@twitterアカウント">
<meta name="twitter:description" content="<?php echo $description; ?>">
<meta name="twitter:image:src" content="<?php echo $ogp_img; ?>"> -->
<!--スタイルシートの呼び出し-->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"><!--font-awesomeのスタイルシートの呼び出し-->
<!--アイコン-->
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png">
<link rel="icon" type="image/png" size="256x256" href="<?php echo get_template_directory_uri(); ?>/images/android-chrome.png">
<?php wp_head(); ?><!--システム・プラグイン用-->
</head>以上で、header.php内のheadタグ内の記述は全て完了です。今回記述したもの以外にも、必要性に合わせてheadタグ内にデータを追加していき、ロボットに適切な情報を伝えることでサイトの上位表示に繋げることができますよ！
次回は、今作成済みのテンプレートをさらに分岐したり、条件分岐を追加したりして、WordPressテーマを仕上げる方法についてご紹介します。
下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。