夢みるゴリラ

Wordpressを使ってブログを書いているとSEO対策は常に考えてしまうもの。特にhead内はtitle(タイトル)やdescription(説明文)のほかにもSEOに重要な情報が詰まっています。今回はSEO対策ができたhead内の書き方を説明していきます。この記事の対象となる人AllinOneSEOPackは使いたくないAdvancedCustomFieldsプラグインが使えるコピペで使いたい※すぐにコピペで利用したい人は以下の順序で設定してください。この設定にはAdvancedCustomFieldsの設定が必須です。WordpressでSEO対策ができたhead内の書き方それではさっそくhead内をどのように書けばいいのか見ていきましょう。下のコードをhead内にコピペしてください。 "> "> タグ直前に必ず挿入します--> 1-1 schema.orgで構造化マークアップschema.orgとはサイトの構造をより詳しく検索エンジンに伝える記述法のこと。head内に書けばいいというわけではなく、headerやfooter、コンテンツとなる場所、サイドバーなどに書くことで検索エンジンに細かく内容を伝えることができます。詳しく知りたい方は以下の記事を詳しく説明されています。1-2 文字エンコーディング情報を出力wordpressでは独自の関数がたくさん用意されています。今回のように書くことで出力されたときには、以下のように表示されます。 1-3 電話番号の自動リンク機能を制御スマートフォン向けの機能で電話番号の自動リンクを無効化します。その他に住所やメールアドレスの自動リンクも無効化できます。1-4 レスポンシブ対応スマートフォンやタブレットなど機種や画面の大きさによってレスポンシブ対応させるために必要になります。1-5 IEでも常に標準モードで表示IEでは過去のバージョンで見せる機能がついていますが、常に標準モードで見せるために書いておきます。ここまでは割と一般的な書き方だと思います。SEOを意識するのであれば次に説明するSEOの設定テンプレート、OGPの設定テンプレートが重要になります。それではまずSEOの設定テンプレートについて説明していきます。※OGP設定テンプレート(twitterカード込み)はこちらの記事にまとめました1-6 SEO設定のテンプレート今回はseo-header.phpがある前提で説明していくので、先にseo-header.phpというファイルを作っておきましょう。メモ帳でもいいので、名前を「seo-header」にして拡張子をphpにして保存してください。こんな感じですね。seo-header.phpを作成したら下のコードをコピペしてください。AdvancedCustomFieldsを使っている箇所は以下です。フィールド名…originalTitleフィールド名…originalDescriptionそれでは上から順に説明していきます。 if(is_noindex_page()):?> "/> "/> ID,'originalDescription',true);?> ID)):?> "> "/> cat_ID;$post_id='category_'.$cat_id;?> | cat_ID;$post_id='category_'.$cat_id;$text=category_description();$text=strip_tags($text);$text=mb_substr($text,0,120,"UTF-8");echo$text;?>"/> ページ目 | "/> "/> 検索結果| お探しのページはございません| "/> if(!is_404()&&!is_search()){echo' ';}?>1-6-1 functionsに記載している定義にnoindexをつけるSEOの効果を高めるためには検索エンジンが訪問するページを絞る必要があります。あまり見られていないページに何度も検索エンジンが訪れるなら、その分の労力を見られているページに回したほうがSEOの効果が高まります。上のコードをseo-header.phpにコピペしたら、次はfunctions.phpを開いて、以下のように書いてください。if(!function_exists('is_noindex_page')):functionis_noindex_page(){return(is_month())||//月のアーカイブページはインデックスに含めないis_date()||//日のアーカイブはインデックスに含めないis_tag()||//タグページをインデックスしたい場合はこの行を削除is_search()||//検索結果ページはインデックスに含めないis_404()||//404ページはインデックスに含めないis_attachment();//添付ファイルページも含めない}endif;これであまり重要ではないページがインデックスされなくなります。1-6-2 （１）トップページトップページは管理画面の設定で入力した内容がそのまま反映されます。これは特に説明することがないでしょう。ぼくのページだとトップページは下で書いたとおりhead内に反映されています。1-6-2 （２）single.php投稿ページはここで書かれたことがhead内に反映されることになります。いろいろ書いてありますが、まとめると以下のようになります。カスタムフィールドの書いてあることが一番優先されます。description(説明文)では、①カスタムフィールド②抜粋欄③本文の順で反映するようになっています。また、titleのフィールド名を「originalTitle」、descriptionのフィールド名を「originalDescription」としてAdvancedCustomFieldsで設定していないと反映されないので注意してくださいAdvancedCustomFieldsの設定方法がわからない方はこちらの記事をどうぞ。また抜粋欄に書いたことをdescriptionに反映させるため、functions.phpを開いて下のコードを加えてください。functionoriginal_description(){if(get_the_excerpt()){$description=get_the_excerpt();}return$description;}1-6-3 （３）category.php必要かどうかは分かりませんがカテゴリーページが表示されたときは、titleにはカテゴリ名が反映され、descriptionにはカテゴリーの説明文が反映されるようになっています。カテゴリページの２ページ以降はページ数とカテゴリー名、それからタイトルが表示されるようにしています。ページ数を表示させるために以下のコードをfunctions.phpに加えてください。このコードを加えてないとカテゴリーページの２ページ目を見たときに画面が真っ白になってしまうので必ず書いてください。functionshow_page_number(){global$wp_query;$paged=(get_query_var('paged'))?get_query_var('paged'):1;$max_page=$wp_query->max_num_pages;echo$paged;}1-6-4 （４）固定ページ固定ページの設定は、ほとんど投稿ページの設定と同じです。一部違うところはdescriptionのところ。①カスタムフィールド②管理画面の説明文の順で反映されます。投稿ページと違って、抜粋欄や記事本文からdescriptionに反映させていません。1-6-5 残りのページについて検索結果ページや404ページは管理画面で設定したtitleとdescritionが反映されるように設定してますが、noindex設定をしているためあまり重要ではありません。それ以外のページは管理画面で設定したtitleとdescriptionが反映されるようになっています。canonicalタグの設定canonicalタグは、同じ記事が複数存在するときに検索エンジンからページ評価を１つの記事に集中させる役割があります。例えばパソコンとスマホで同じ記事でもurlが分かれてしまう場合に使えます。SEO効果だけではなく、ペナルティを受けないためにも必要な設定です。このコードを使う場合はwordpressが自動で出力するcanonicalタグを止める必要があります。functions.phpを開いて以下のコードを加えてください。remove_action('wp_head','rel_canonical');まとめまだOGP設定をしていないのでうまく動作はしません。OGPの設定は以下の記事に書いたので、説明に沿って設定してみてください。OGP設定をせずに、とりあえず公開したい場合は、header.phpにコピペした以下の部分を削除しましょう。 ちなみに似たような設定はAllinOneSEOPackプラグインを使えば簡単にできます。もちろんOGP設定もtwitterカードの設定もできるので多少重くても手軽にSEO対策をしたいならAllinOneSEOPackで十分でしょう。プラグインに頼らずに自分用にhead内をカスタマイズしたい人は今回を参考にしてみてください。

WordPressでSEOを意識したhead内の書き方とは？

GSAPのScrollTrigger.jsを使ったスクロールアニメーションを実装する方法

【VSCode】Dart Sassが使える拡張機能 - DartJS Sass Compiler and Sass Watcherの使い方

Sassで@useと@forwardを使ったサイト設計 - @importから切り替える手順

【CSSだけ】画像が横に流れ続ける無限ループの作り方 - IE11対応済み

「Live Sass Compiler」の設定方法 - VScodeでSassを書く

TypeScriptで配列をループする方法 - ６つのループを紹介

【TypeScript】引数と一緒に型を渡す方法 - ジェネリクス

FLOCSSベースのサイト設計 - 破綻しないルールを決める