仕事で使える！WordPressでSEO対策を強化する実装方法と必須の設定を完全解説

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressでエンジニアがするべきSEO対策を強化する実装方法について解説していきたいと思います。

当記事では一般的な当たり前のSEO対策の内容よりかは、エンジニア向けのより高度なSEO対策関連の実装内容の解説記事となっております。

また当記事では以下に当てはまる方が対象となっておりますので、もし当てはまらなければ事前に確認しておいていただけますと読み進めやすいかと思います。

• SEO対策の一般的な知識がある方
• HTMLについて基本的な知識がある方
• WordPressについて基本的な知識がある方

当記事一つでWordPressでのSEO対策の実装のあれこれについて完全カバーしている内容となっておりますので、よろしければぜひ当記事をお仕事などでお役立ていただけましたら幸いです。

SEO対策とは？

SEO対策とは、Googleなどの検索エンジンでの自然検索時にランキングを上位にし表示順を一番上にする対策のことをいいます。

このSEO対策をすることにより自分のサイトが多くのユーザーに見られることになり、マーケティング施作などに大きく貢献することができます。

本気でやるならSEO対策は必ず必要

もし本気でサイト運営を行うのであれば、このSEO対策は必ず必要になります。

理由は以下になります。

• サイトは見られなければ意味がないから
• SEO対策次第で結果的に信用につながるから
• 会社の案内としての機能やマーケティング等つながりビジネスに不可欠

それぞれ解説していきます。

サイトは見られなければ意味がない

サイトの目的や会社の方針にもよりますが、そもそもサイトは人々に見られるものでないと意味がないと考えます。

その理由は、サイトの本質は情報提供であり企業情報やご自身のメディアブログなどを見てもらえて初めて価値を発揮するからです。

もし何もサイトの施策を行わずただあるだけのサイトとなってしまうと、サーバー代やドメイン代、またエンジニアによる運用保守代が無駄や損失になってしまいます。

サイトをビジネスで活用する場合はせめて最低限のSEO対策でもやっていただくことをおすすめいたします。

SEO対策次第で結果的に信用につながる

SEO対策次第で信用につながる可能性があります。

これはどういうことかというと、SEO対策といっても色々ありますが、SEO対策に力を入れるということはサイトのデザインなど見た目の部分だったり、ページにある文章や画像などの質が高くなるということになります。

結果的に閲覧するユーザーにとっては好印象を持ちやすく、サイトやその会社に対して信用を持ちやすくなります。

そのため筆者は「SEO対策＝信用の向上」と考えます。

会社の案内としての機能やマーケティング等につながりビジネスに不可欠

サイトは会社の案内や窓口としての機能やマーケティング施策などにつながり、ビジネスにとっては必要不可欠です。

例えば、コーポレートサイトであれば会社についての情報が網羅された非常に詳しいパンフレットになり、ECサイトであれば購入が可能な商品カタログ、といった具合にサイトの系統によってさまざまな機能を持っているかと思います。

このようにゴールあるサイトが多くのユーザーに閲覧されることによって、その分多くの取引が生まれビジネスにSEOが大きく貢献します。

WordPressがSEO対策に適している理由

WordPressがSEO対策に適している理由がいくつかあります。

筆者が考える理由としては以下になります。

• SEO対策に適したカスタマイズが可能
• SEO対策用のプラグインやテーマが豊富
• SEOの結果が反映されやすい構造で作られている
• 独自ドメインで運用が可能
• すでにSEO評価が悪くても改善の幅が大きい

それぞれ解説していきます。

SEO対策に適したカスタマイズが可能

WordPressはSEO対策に適したカスタマイズが可能です。

その理由は、WordPressはサーバーインストール型であり、自由にWordPressを構成するPHPファイルを編集できるからです。

WordPressは無料ブログサービスなどとは違いサーバーにWordPressの本体ファイル（PHPファイル）をインストールして利用することになるかと思います。（ブログサービスにあたるWordPress.comは除きます）

このようにサーバーインストール型のWordPressであれば、サイトの見た目を作成するWordPressテーマのPHPファイルのカスタマイズや、お好きなプラグインを利用できたりすることができ、細かいことは除けば100％自由に理想のウェブサイトを立ち上げることができます。

無料ブログサービスでは提供されているサービス範囲内でしかカスタマイズすることができず、下手したら全くカスタマイズすることができないケースも多々あります。（サービス上、仕方のないことだとは思います）

そのため、SEO対策用にフルカスタマイズしたい場合はWordPressがダントツでおすすめです。

SEO対策用のプラグインやテーマが豊富

WordPressには世界中のエンジニアによって提供されている非常に多くのプラグインが無料で提供されております。

導入に関してもクリックするだけでインストールすることができてしまうため、高度な拡張機能を手軽に簡単に導入できてしまいます。

また、テーマに関しても同様に多くのものが無料でインストールすることが可能です。

ただ、筆者的に無料テーマは見栄えが悪かったりするので、有料にはなってしまいますが、販売されているテーマを購入したり、Web制作会社やフリーのエンジニアなどに依頼してゴリゴリにSEO対策＋Webデザインされたテーマを作ってもらうなどすることも投資として検討してみても良いかと思います。

SEOの結果が反映されやすい構造で作られている

そもそもWordPressはSEOに適した構造で作られております。

例えば、WordPress標準でSEO対策に必要なメタ情報（headタグ内の情報）やカテゴリーやタグ機能だったりがすでに実装されております。

ただし、標準では最低限の機能しかないため、他にSEOで必要な機能はプラグインを導入したりすることで対応します。

そのため、WordPressはSEOに最適に作られているといえます。

独自ドメインで運用が可能

WordPressでは個人のドメイン（独自ドメイン）で運用がですることが可能なため、SEO対策において有利と考えます。

その理由は、検索エンジンはドメイン（URL）単位でサイトを評価するためです。

WordPressではレンタルサーバーを契約しつつドメインを取得して独自ドメインで運営することになるため、SEO対策が検索エンジンに評価されやすいといえます。

無料ブログサービスでは基本的にブログ管理者ごとにサブドメインを共有されて（共有ドメイン）運用することになるため、どちらかというとWordPressに軍配が上がるかと思います。

すでにSEO評価が悪くても改善の幅が大きい

もしすでに現時点でWordPressで構築されたサイトでSEO評価が悪い状態であるならば、全然巻き返せる余地があるといえます。

理由は、コードを改修すればサイトの構造やレイアウトを容易に変更できたり、SEO対策にとって非常に重要なスピード改善などの対応が隅々までしっかり行えるからです。

筆者自身もこれまでの仕事で、「〇〇」のビックキーワードで検索順位が20〜30位の位置にいたWordPressの求人サイトを1位に持ち上げた実績がありますので、その経験を根拠に、WordPressはSEO評価が悪くてもいくらでも改善できるということを結論づけさせていただきます。（2024年4月時点のリアルタイムで現在継続1位です）

SEO対策で行うべき実装（テーマ構築編）

それでは早速SEO対策で行うべき実装について解説していきたいと思います。

内容としては以下になりまして、テーマ開発のコーディングにおいて実装すべき内容となっております。

• Google タグマネージャーのスニペットコードの設置
• セマンティックなマークアップ
• レスポンシブ対応
• 構造化データ（サイトのメタ情報、パンくずリスト等）
• サイトマップの作成
• タイトル・ディスクリプションの実装・設定
• ページネーション対応
• ナビゲーションの設置
• パンくずリストの設置
• 画像imgタグにalt属性追加
• OGPの実装

上記以外にもSEOを踏まえたWordPressのテーマ構築の方法はまだまだありますが、最低限テーマ開発においておこなうべき作業項目になります。

それぞれ解説いたしますので、ぜひ実際の仕事などでテーマ構築の際はここでの内容を反映させた上で実装しましょう。

Google タグマネージャーのスニペットコードの設置

SEO対策としてまず一番はじめにすべきこととして、Google タグマネージャー（もしくはGoogle Analytics）のスニペットの設置をおこなう必要があります。

Google タグマネージャーはGoogle Analyticsと連携して利用することになりますが、Google タグマネージャーのスニペットの設置をすることで、Google Analyticsの画面からサイトのトラフィックやユーザー行動を分析したり、Google タグマネージャーにてトリガーなどを設定してクリック数の取得などをGoogle Analytics画面から確認したりなど、SEO対策やマーケティング施策などに必須の機能を利用することができます。

また、スニペットとは以下のような短いソースコードになります。

Google タグマネージャー以下のコードをheadタグ内に設置し…

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W4HX7TP7');</script>
<!-- End Google Tag Manager -->

以下のコードをbodyタグの直後に設置します。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W4HX7TP7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

上記スニペットコードは、Google タグマネージャー管理画面から自動生成されて、いつでも確認することができます。

クライアントからもほぼ必ず要望があるかと思いますので、必ず実装するようにしましょう。

セマンティックなマークアップ

セマンティックなマークアップとは、HTMLや他のマークアップ言語において、要素の意味や目的を明確にするために適切なタグを使用することをいいます。

これにより、コンテンツがより理解しやすく、検索エンジンや支援技術（スクリーンリーダーなど）に対しても適切に解釈されます。

セマンティックなマークアップには、以下のHTMLタグを使用します。

• headerタグ
• navタグ
• mainタグ
• articleタグ
• sectionタグ
• asideタグ
• footerタグ

それぞれについて解説いたします。

headerタグ

headerタグは、サイトのヘッダー部分を定義します。

<header>
    <h1>ウェブサイトのタイトル</h1>
    <nav>ナビゲーションバー</nav>
</header>

navタグ

navタグは、ナビゲーションリンクを定義します。

<nav>
    <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">アバウト</a></li>
        <li><a href="#contact">コンタクト</a></li>
    </ul>
</nav>

mainタグ

mainタグは、ページの中の主要なコンテンツ部分を定義します。1ページに1つだけ使用します。

<main>
    <article>
        <h2>記事タイトル</h2>
        <p>記事の内容</p>
    </article>
</main>

articleタグ

articleタグは、独立したコンテンツ（ブログ記事、ニュース記事など）を定義します。ウェブページ上で独立して存在することができるコンテンツを示すために使用されます。

<article>
    <h2>ブログ記事のタイトル</h2>
    <p>この記事の内容です。</p>
    <p>さらに詳細な内容が続きます。</p>
</article>

sectionタグ

sectionタグは、関連する内容のグループを示すために使用されます。

<section>
    <h2>セクションのタイトル</h2>
    <p>このセクションの内容です。</p>
    <p>さらに詳細な内容が続きます。</p>
</section>

上記のコードでは、sectionタグはページの特定のセクションを示しています。セクションのタイトルと内容が関連しており、ページ全体の中で論理的なグループを形成しています。

articleタグとsectionタグの違い

articleタグは独立して存在し、他の場所でも意味が通じるコンテンツを示します。対して、sectionタグはページ内で関連する内容のグループを示し、必ずしも独立していません。

そのため、articleタグとsectionタグの使い分けとしては、ブログ記事やニュース記事など、単体で意味が通じるコンテンツにはarticleタグを使用し、ページ内の関連するコンテンツをグループ化する際には sectionタグを使用します。

<article>
    <h2>ブログ記事のタイトル</h2>
    <section>
        <h3>セクション1のタイトル</h3>
        <p>セクション1の内容です。</p>
    </section>
    <section>
        <h3>セクション2のタイトル</h3>
        <p>セクション2の内容です。</p>
    </section>
</article>

上記のコードでは、articleタグはブログ記事を示し、その中に2つのセクションを含めています。各セクションは関連する内容をグループ化しています。

asideタグ

asideタグは、メインコンテンツに関連する補足情報を定義します（サイドバー、広告など）。

<aside>
    <h2>関連記事</h2>
    <ul>
        <li><a href="#article1">記事1</a></li>
        <li><a href="#article2">記事2</a></li>
    </ul>
</aside>

footerタグ

footerタグは、サイトのフッター部分を定義します。

<footer>
    <p>© 2024 会社名. All rights reserved.</p>
</footer>

セマンティックなマークアップのメリット

セマンティックなマークアップのメリットは以下になります。

セマンティックなマークアップは、ウェブ開発において重要な役割を果たします。コードの可読性やアクセシビリティを向上させ、SEO効果も高めることができます。

適切なHTML要素を使うことで、ウェブページはより構造化され、理解しやすいものになります。

基本的に理由がなければしっかりセマンティックなマークアップでサイトを実装しましょう。

レスポンシブ対応

レスポンシブ対応とは、ウェブページが異なるデバイスや画面サイズに自動的に適応するように設計されていることを指します。

これにより、PC、タブレット、スマートフォンなど、どのデバイスでも快適に閲覧できるウェブページが実現します。

エンジニアとしてCSSでのサイト実装をレスポンシブ対応でコーディングするのは常識ではありますが、Googleをはじめとする検索エンジンはレスポンシブデザインを推奨していることもあり、このレスポンシブ対応はSEO対策として必須といっても過言ではないので、必ずここで確認しておきましょう。

レスポンシブ対応は以下のようにメディアクエリの記述をおこない、PC、タブレット、スマートフォンそれぞれの画面のときにそれぞれのCSSを反映させます。

/* PC時のCSS */
body {
    background-color: green;
}
/* タブレット時のCSS */
@media (min-width:769px) and (max-width:1080px){
    body {
        background-color: orange;
    }
}
/* スマホ時のCSS */
@media (max-width: 600px) {
    body {
        background-color: blue;
    }
}

レスポンシブ対応のメリット

レスポンシブ対応のメリットは以下になります。

基本的に理由がなければCSSはレスポンシブ対応で実装しましょう。

構造化データ（サイトのメタ情報、パンくずリスト等）

ウェブページのコンテンツを検索エンジンや他のウェブサービスが理解しやすいように、特定のフォーマットでマークアップするデータのことです。

これにより、検索エンジンがページの内容を正確に理解し、検索結果にリッチスニペットとして表示することができます。

リッチスニペット（Rich Snippets）とは、検索エンジンの検索結果ページ（SERP）に表示される強化された情報のことをいいます。

通常の検索結果には、ページのタイトル、URL、およびメタディスクリプションが表示されますが、リッチスニペットは、これに加えて構造化データを基にした追加情報が表示されます。

リッチスニペットは下図の部分のことをいいます。

リッチスニペットの実装は以下のコードをheader.phpなどに実装します。

<?php
if(is_singular('post')):
  $schema_mainEntityOfPage_id = get_permalink();
  $schema_headline = get_the_title();
  $schema_image_url = get_theme_file_uri() . '/image/noimage.png';
  $schema_datePublished = get_the_time('Y-m-d\TH:i:sP');
  $schema_dateModified = get_the_modified_time('Y-m-d\TH:i:sP');
  $schema_author_name = '高澤翔汰';
  $schema_author_url = 'https://wordpress-mag.com/author/';
  $schema_publisher_name = '高澤翔汰';
  $schema_publisher_jobTitle = 'エンジニア';
  $schema_articleBody = '';
  $schema_articleSection = 'WordPress';
  $schema_keywords = 'programming, プログラミング, wordpress, ワードプレス';
?>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<?php echo $schema_mainEntityOfPage_id; ?>"
  },
  "headline": "<?php echo $schema_headline; ?>",
  "image": [
    {
      "@type": "ImageObject",
      "url": "<?php echo $schema_image_url; ?>",
      "width": "1",
      "height": "1"
    },
    {
      "@type": "ImageObject",
      "url": "<?php echo $schema_image_url; ?>",
      "width": "4",
      "height": "3"
    },
    {
      "@type": "ImageObject",
      "url": "<?php echo $schema_image_url; ?>",
      "width": "16",
      "height": "9"
    }
  ],
  "datePublished": "<?php echo $schema_datePublished; ?>",
  "dateModified": "<?php echo $schema_dateModified; ?>",
  "author": [
    {
      "@type": "Person",
      "name": "<?php echo $schema_author_name; ?>",
      "url": "<?php echo $schema_author_url; ?>"
    }
  ],
  "publisher": {
    "@type": "Person",
    "name": "<?php echo $schema_publisher_name; ?>",
    "jobTitle": "<?php echo $schema_publisher_jobTitle; ?>",
    "url": "",
    "image": {
        "@type": "ImageObject",
        "url": "",
        "width": "400",
        "height": "400"
    }
  },
  "articleBody": "<?php echo $schema_articleBody; ?>",
  "articleSection": "<?php echo $schema_articleSection; ?>",
  "keywords": "<?php echo $schema_keywords; ?>"
}
</script>
<?php
endif;
?>

上記コードは、PHP変数を使用して、記事（投稿）の各種メタ情報を取得し、JSON-LD形式で記述しています。

上記コードのままでは筆者の情報やリンク切れのnoimage画像が記述に含まれているため、必ずご自身のサイト用に調整してから実装してください。

リッチスニペットは、検索エンジンの検索結果ページに表示される強化された情報で、ユーザー体験を向上させ、クリック率を高めるために非常に有用です。

適切な構造化データを使用し、正確に実装することで、ウェブサイトの可視性とSEOの効果を高めることができます。

ご自身のサイトに最適なリッチスニペットの実装方法をご確認いただき、積極的に取り入れていきましょう。

サイトマップの作成

サイトマップ（Sitemap）とは、ウェブサイトのすべてのページやコンテンツを一覧で示したXMLファイルのことです。

XMLサイトマップは主に以下の目的で使用され、SEO対策に重要な役割を果たします。

WordPressでは、このXMLサイトマップはデフォルトの機能としてXMLサイトマップを生成する機能が用意されております。

例えば、当サイトのサイトマップは以下のURLでXMLサイトマップにアクセスできます。

https://wordpress-mag.com/wp-sitemap.xml

URLは、【ご自身のサイトドメイン】/wp-sitemap.xmlのように、「wp-sitemap.xml」というXMLファイルでXMLサイトマップのファイルが生成されます。

ちなみに、Webページとしてのサイトマップと混同しないようにご注意ください。

このXMLサイトマップのURLをGoogle Search Consoleに登録することで、Googleがサイトを効率的にクロールし、インデックスに追加することができますので、こちらもご確認ください。

タイトル・ディスクリプションの実装・設定

タイトルとディスクリプションは、SEO対策の基本的な要素であり、検索エンジンの検索結果で表示される非常に重要な概念です。

その理由は、タイトルは特に重要であり、各記事ページごとに適切なキーワードを含めることで、そのキーワードで検索した際にヒットさせることが可能となり、サイトのランキングを向上させる効果があります。

タイトル内にキーワードを適切に設定することで、検索エンジン結果での表示を最適化し、ユーザーのクリック率を向上させることができます。

また、ディスクリプションも検索結果でタイトルの直下に表示され、ページの内容を端的に説明しユーザーに価値ある情報を提供することで、クリック率を向上させる効果があります。

参考として、以下がタイトルとディスクリプションの実装コードを載せておきます。

<title>
<?php
if(!is_home() || !is_front_page()):
    wp_title('｜',true,'right');
    bloginfo('name');
else:
    bloginfo('name');
endif;
?>
</title>
<meta name="description" content="<?php bloginfo('description'); ?>">

ご自身のサイトに適した形でカスタマイズしていただいても大丈夫ですので、よろしければお使いください。

ページネーション対応

ページネーションとは、ウェブサイトが複数のページに分かれて表示される場合に使用される仕組みです。

ページネーションを実装して大量のコンテンツを複数ページに分割することで、ユーザーが見やすくなります。例えば、ブログ記事一覧や商品一覧などでページネーションが使用されます。

また、ページネーションによりページの読み込み時間が短縮されてレンダリング時の容量を少なくすることができ、そういう意味でもSEO対策になります。

ただし注意点としては、検索エンジンはページネーションを正しく認識し、インデックスに適切に反映する必要があります。特に、ページネーションは重複コンテンツが生じてしまうリスクがあります。

例えば、対策として以下のような手段があります。

このページネーションは、大規模なサイトやコンテンツ管理が必要なサイトで特に重要です。適切に実装することで、ユーザーエクスペリエンスの向上とSEOの最適化を両立させることができます。

上記2点の対策をおこなうべきですが、特に2ページ目以降のページタイトルの重複を避ける設定は必ずおこないましょう。

ページネーションの実装方法については以下の記事を確認いただけますと幸いです。

ナビゲーションの設置

ナビゲーション（Navigation）は、ウェブサイトの重要な要素であり、SEO（検索エンジン最適化）においてもいくつかの重要な役割を果たします。

ここではナビゲーションのSEO上の必要性と実装のポイントについて解説いたします。

ナビゲーションのSEO上の必要性

ナビゲーションのSEO上の必要性は以下になります。

ナビゲーションの実装のポイント

ナビゲーションの実装のポイントは以下になります。

良好なナビゲーション設計は、サイトのSEOパフォーマンス向上に寄与する重要な要素です。ユーザーが簡単に目的のページにたどり着けるようにすることで、検索エンジンにもそのサイトの価値を正しく評価させることができます。

パンくずリストの設置

パンくずリスト（Breadcrumbs）とは、ウェブサイト上で現在のページの位置を示すナビゲーションのことをいいます。

パンくずリストをページに設置することによって、ユーザーがサイト内で自分の位置を把握しやすくします。これにより、迷子になることなく、サイト内を自由に移動できるようになります。

また、SEO対策の観点でいえば、検索エンジンにとても有益で、クローラーがサイトの階層構造やページの関連性を理解するのに役立ちます。これにより、検索結果での表示が改善され、クリック率が向上する可能性があります。

パンくずリストの設置方法については以下の記事をご確認いただけますと幸いです。

画像imgタグにalt属性追加

画像のimgタグにalt属性を追加することは、SEOやアクセシビリティの観点から非常に重要です。

alt属性は画像が表示されない場合に代替テキストを表示するものであり、スクリーンリーダーを使用するユーザーや検索エンジンに画像の内容を伝える役割を果たします。

また、画像URLのリンク切れの際にも本来表示されるべき画像の内容がテキストで表示させることができます。

WordPressでの実装方法としては、例えば以下のような内容があります。

<?php if ( has_post_thumbnail() ) : ?>
    <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php echo get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ); ?>" />
<?php endif; ?>

上記のコードは、投稿にサムネイル画像が設定されている場合にそのURLを取得し、alt属性にはサムネイル画像の代替テキストを追加します。

他にもalt属性の値にはget_the_title()を使用したり、記事ごとにalt属性用の独自のカスタムフィールドを追加して実装したりなど、さまざまな実装方法があります。

OGPの実装

OGP（Open Graph Protocol）とは、WebページがSNSなどのソーシャルメディア上で共有された際に、ページのコンテンツ（タイトル、説明、画像など）をユーザーにとって見やすくするために最適化された状態でSNS上でシェアすることができます。

WordPressでは以下のようなコードをfunctions.phpにコピー＆ペーストしていただくことでOGPを実装できます。

function add_ogp_meta_tags() {
    if (is_single() || is_page()) {
        global $post;
        setup_postdata($post);

        $og_title = get_the_title();
        $og_description = get_the_excerpt();
        $og_url = get_permalink();
        $og_image = get_the_post_thumbnail_url($post, 'full');

        if (!$og_image) {
            // デフォルトの画像を設定
            $og_image = get_template_directory_uri() . '/path/to/default-image.jpg';
        }

        echo '<meta property="og:title" content="' . esc_attr($og_title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($og_description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($og_url) . '" />' . "\n";
        echo '<meta property="og:image" content="' . esc_url($og_image) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . get_bloginfo('name') . '" />' . "\n";
        echo '<meta property="og:locale" content="ja_JP" />' . "\n";

        wp_reset_postdata();
    }
}

add_action('wp_head', 'add_ogp_meta_tags');

上記コード中のOGPタグの内容は以下になります。

実装後は、FacebookのSharing DebuggerやTwitterのCard Validatorを使用して、OGPタグが正しく機能しているか確認することをおすすめします。

これらのツールは、ページのメタデータを読み取り、ソーシャルメディア上でどのように表示されるかを確認するのに役立ちます。

OGPの実装は、コンテンツがソーシャルメディア上で魅力的に表示されるようにするための重要なステップです。適切に設定することで、クリック率やエンゲージメントの向上に寄与します。

特に理由がなければ、必ず実装するようにしましょう。

SEO対策で行うべき実装（スピード改善編）

次はSEO対策で順位を上げるのに非常に重要な作業となるスピード改善について解説したいと思います。

筆者自身もこれまでのクライアント案件で、漢字2文字で「〇〇」のようなビックキーワードで検索順位が20〜30位の位置にいたWordPressの求人サイトを、スピード改善作業を施したら1位に持ち上げた実績があります。（2024年4月時点のリアルタイムで現在継続1位です）

その経験を根拠にここではSEO対策で非常に重要なスピード改善について解説していきます。

結論からいうと、以下の内容がスピード改善作業になります。

• 画像のサイズ変更・圧縮
• 画像形式（jpg、png、webp等）の選定
• 画像を遅延読み込み（a3 Lazy Loadプラグイン）
• Javascriptを遅延読み込み（Flying Scriptsプラグイン）
• 無駄なJavaScriptの削除
• 無駄なCSSの削除・外部読み込みファイルを極力減らす
• CSS・JavaScriptコードの読み込み順・適切な配置
• できるだけアクセスしたページに関係ないソースコードは読み込ませない

上記内容のほとんどはGoogleが提供するPageSpeedInsights（https://pagespeed.web.dev）を使用して指示された内容になります。

そのため、基本的にスピード改善は、PageSpeedInsights（ページスピードインサイト）を使って検証を繰り返しつつ改善点を洗い出し地道に改善していきます。

PageSpeedInsightsは下図のイメージになります。

上図のようにURLの入力フォームに検証したいページのURLを入力して「分析」をクリックすると点数表化結果が表示されます。

点数評価の下に改善すべき作業内容が表示されます。

表示されている修正すべき作業を一つひとつ地道に潰していくことで点数が高くなっていきSEOの評価が上がっていきます。

筆者の過去の案件でSEO評価改善があったのですが、このPageSpeedInsightsで表示された修正すべき作業項目をクリアさせた結果、ビックキーワードでの自然検索1位を獲得したのでこのツールで案内される内容に従って改善作業をおこなえば効率的にかつ確実にSEO評価改善ができると思います。

画像のサイズ変更・圧縮

まず最もページスピード改善に影響する手段の一つといえるのがこのページ上の画像のサイズ変更・圧縮になります。

タイトルにもある通り厳密には「サイズの変更」と「圧縮」の2つの作業が必要になりまして、「サイズの変更」とはそもそもの画像の解像度（単位はピクセル）を小さくすることをいい、「圧縮」は画像自体の容量（バイト数）を軽くすることをいいます。

例えば、「サイズの変更」でいえば、もともと横幅2000px、縦幅1000pxの画像であればそれを横幅1000px、縦幅500pxにまで縦横の比率はそのままに、解像度を小さくすることをいいます。

「圧縮」に関しては、シンプルに画像のバイト数である容量の数値を小さくすることをいいます。

この「画像のサイズ変更・圧縮」を対応することによって、Webサイトのページのレンダリングの読み込みの処理が軽くなるため、ページスピードが改善し、検索順位の向上に寄与します。

画像形式（jpg、png、webp等）の選定

画像形式（jpg、png、webp等）にも意識すると、他のサイトとの差をつけることができます。

ここではこれまでの筆者の仕事での経験やノウハウをお伝えし、SEO対策に寄与する画像形式の選定について知識をお伝えします。

まず、主にWebサイトやアプリケーションで使用される画像は以下になります。

それぞれご確認いただけたかと思いますが、筆者がこれまでの経験上おすすめし、またSEO対策にもなる画像形式の扱いは以下になります。

• 基本的に容量が軽いjpg形式を使用
• イラストやロゴ、ボタンアイコンなど背景を透過が必要な画像はpng形式を使用
• 動くイラストのアニメーションなどはsvg形式を使用
• SEO対策としてゴリゴリに実装したい場合はリスクを承知した上でwebp形式を使用
• gif形式は理由がなければ使用しない

上記の内容通りに実装していくことで、SEO対策に沿った画像の実装が可能となるかと思います。

よろしければぜひご参考にしていただけますと幸いです。

画像を遅延読み込み（a3 Lazy Loadプラグイン）

SEO対策に沿った画像の実装方法としては「画像を遅延読み込み」があります。

画像の遅延読み込みとは、ユーザーがスクロールして画像が画面に表示される瞬間まで、その画像の読み込みを遅らせる技術です。

これにより、ページにアクセスした際の初期ページロードの速度が向上し、無駄な帯域幅の消費を防ぎます。

念の為、画像の遅延読み込みのメリットは以下になります。

画像の遅延読み込みを実現するにはa3 Lazy Loadプラグインを使用します。

WordPress管理画面から「a3 Lazy Load」と検索してインストールし、有効化をおこなってください。

a3 Lazy Loadとは、WordPressのデータベースから出力された画像を遅延読み込みさせることができるプラグインです。

注意点としては、あくまでもデータベースから出力された画像（記事サムネイル画像、記事一覧の画像等）が対象なので、HTMLベタがきで記述したimgタグの画像は遅延読み込みされません。

理由は、遅延読み込みさせるためのdata属性やクラス名等がimgタグに付与されていないからです。

そのため、HTMLベタがきで記述したimgタグの画像は、以下のコードのように必要なdata属性やクラス名等をご自身で記述して対応します。

<img width="640" height="427" src="//example.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="【画像URL】" class="lazy lazy-hidden attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="サンプル画像の説明" decoding="async" loading="lazy" srcset="" data-srcset="【画像URL】 640w, 【画像URL】 300w" sizes="(max-width: 640px) 100vw, 640px" />
<noscript><img width="640" height="427" src="【画像URL】" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="サンプル画像の説明" decoding="async" loading="lazy" srcset="【画像URL】 640w, 【画像URL】 300w" sizes="(max-width: 640px) 100vw, 640px" /></noscript>

当記事ではa3 Lazy Loadプラグインについて詳しく解説するととんでもない量の文字数になってしまうため、詳しい解説はしませんが、簡単な設定をするだけでまったく難しくないので、よろしければお試しください。

Javascriptを遅延読み込み（Flying Scriptsプラグイン）

Javascriptを遅延読み込みも非常に重要です。何よりPageSpeedInsightsすごく指摘される内容の一つなので、この対応をおこなえば、ページスピードの点数が向上しSEO対策に大きく寄与します。

Javascriptを遅延読み込みを実現するには、Flying Scriptsプラグインを使用します。

WordPress管理画面から「Flying Scripts」と検索してインストールし、有効化をおこなってください。

Flying Scriptsとは、JavaScriptの読み込みを遅延読み込みとすることができるプラグインで、プラグイン管理画面から指定の入力欄に対象のJavaScriptファイル名を入力していただけると遅延読み込みすることができます。

当記事ではFlying Scriptsプラグインについて詳しく解説するととんでもない量の文字数になってしまうため、詳しい解説はしませんが、設定は簡単なのでよろしければお試しください。

無駄なJavaScriptの削除

無駄なJavaScriptのコードがあれば、削除していきます。

テーマを構成するディレクトリ内のJavaScriptのソースコードを確認し、使用していないコードは削除しましょう。

無駄なコードを削除しておくことで、例えばたまたまHTMLのクラス名やID名が重複などしてしまい、DOMの取得がされて予期せぬバグが発生するなどがあるため、その予防にもつながります。

無駄なJavaScriptコードの内容は下図のようにPageSpeedInsightsにて確認できるので、PageSpeedInsightsの情報をもとに修正実装していきます。

無駄なCSSの削除・外部読み込みファイルを極力減らす

無駄なCSSのコードがあれば、削除していきます。

テーマを構成するディレクトリ内のCSSのソースコードを確認し、使用していないコードは削除しましょう。

読み込みのデータ量が減り、ページスピードが改善する可能性があります。

無駄なCSSコードの内容は下図のようにPageSpeedInsightsにて確認できるので、PageSpeedInsightsの情報をもとに修正実装していきます。

また、外部ファイルとしてのCSSの読み込みファイルの外部読み込みを極力減らすこともおすすめです。

何かしらのCSSのライブラリファイルを読み込む場合などは仕方ありませんが、サイトのレイアウト用で記述したCSSソースコードを極力少ない方が読み込みのアクセスが減り、管理がとても大変になってしまいます。

イメージとしては以下のように無駄にCSSファイルを作って読み込ませているところを…

<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/reset.css">
<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/import1.css">
<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/import2.css">
<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/import3.css">
<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/import4.css">
<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/import5.css">

以下のようにreset.css（リセットCSS）とサイトレイアウト用の複数のCSSファイルを一つのCSSファイルにまとめて一本化するようにするとスッキリして、保守管理も楽になります。

<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/reset.css">
<link rel="stylesheet" type="text/css" href="./wp-content/themes/sample_theme/css/import.css">

逆にページごとやモジュール、コンポーネントごとに分けて複数のCSSファイルを作成して管理したいという場合は、CSSのフレームワークであるSass（SCSS）などを利用することをおすすめいたします。

CSS・JavaScriptコードの読み込み順・適切な配置

CSS・JavaScriptコードの読み込み順や適切な配置を意識して実装することは控えめにいって非常に重要です。

まず大前提の基礎知識として、ページを構成するHTMLやCSS、JavaScriptコードは、上から順番に記述されたソースコードが読み込まれていきます。

そのため、以下の内容を絶対に守ってコードを記述して実装してください。

• CSSはHTMLが読み込まれる前に記述する（読み込む）
• JavaScriptがHTMLとCSSが読み込まれた後に記述する（読み込む）

上記を守らなかった場合、例えばHTMLがCSSの記述より前（コード的には上）に書かれている場合、もちろんHTMLが先に読み込まれますが、ページにアクセスしたときに一瞬ちらっとCSSが反映されていないHTMLが表示させることになります。

また、JavaScriptコードがHTMLとCSSが読み込まれる前に記述された場合、そもそもDOMを取得できないため、JavaScriptが動かなくなってしまいます（JavaScriptコードはライブラリの読み込みではなく機能のコードになります）

以下のような順番のイメージを意識していただけると良いかと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ</title>
    <!-- CSSの読み込みをここで行う -->
    <link rel="stylesheet" href="styles.css">

    <!--
    ※jQuery本体ファイルの読み込みなどはhead内に記述しても大丈夫です。
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    -->
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはサンプルページです。</p>
    
    <!-- HTMLとCSSの読み込み後にJavaScriptを読み込む -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="script.js" defer></script>
</body>
</html>

できるだけアクセスしたページに関係ないソースコードは読み込ませない

できるだけアクセスしたページに関係ないソースコードは読み込ませないことも重要です。

ソースコードの量が増えれば増えるだけ、ページのレンダリング処理に時間がかかってしまうため、できるだけアクセスしたページに関係ないソースコードは読み込ませないようにする必要があります。

例えば、メインビジュアル画像はトップページのみ表示させることが定番かと思いますが、以下のようにWordPressテーマではPHPの条件分岐で特定のページのときだけ表示するようにする実装をすることがおすすめです。

<?php
if(is_front_page()):
// トップページのみメインビジュアルを表示
?>
<div class="mainVisual">
    <img src="<?php echo get_theme_file_uri(); ?>/image/mainVisual.jpg">
</div>
<?php
endif;
?>

条件分岐ではWordPressテンプレートタグであるis_front_page()関数で実装してますが、これでトップページの時のみメインビジュアルが表示されるようにできます。

また、CSSコードをインラインCSSとして記述することも非常に有効です。

インラインCSSは以下のように実装することが可能です。

<?php
if(is_front_page()):
// トップページのみメインビジュアルを表示
?>
<style>
/* メインビジュアルだけに適用されるインライン用のCSS */
.mainVisual{
    width:1000px;
    height:auto;
}
@media screen and (max-width:768px){
    .mainVisual{
        width:100%;
    }
}
</style>
<div class="mainVisual">
    <img src="<?php echo get_theme_file_uri(); ?>/image/mainVisual.jpg">
</div>
<?php
endif;
?>

これで、メインビジュアルだけに適用されるインライン用のCSSコードがトップページの時のみに反映されて、他のページの時には影響しないようにできます。

よろしければお試しください。

SEO対策に必要なツール

SEO対策には、SEO対策をサポートしてくれるツールが無料で提供されています。（有料のものもあります）

ここでは、エンジニアがWebサイトを実装する上で必要なツールを含めて、一般的にSEO対策で必須とされるツールを解説いたします。

いずれも無料の常識的なツールなので、必ずここで内容を確認しておきましょう。

解説するツールの内容は以下になります。

• Google Search Console
• Google Analytics
• Google キーワードプランナー
• ラッコキーワード
• PageSpeedInsights
• リッチリザルトテスト
• スキーママークアップ検証ツール

それぞれ解説いたします。

Google Search Console

Google Search Console（旧Google Webmaster Tools）は、ウェブサイトの検索パフォーマンスを監視し、改善するための無料ツールです。ウェブサイトがGoogleの検索結果にどのように表示されているかを確認し、問題を特定して修正するのに役立ちます。

このツールはサイト運営には必須のツールと言っても過言ではありませんが、エンジニアが実装で使用する際に必ずしも必要ではありません。

ただ、このツールの画面を閲覧できるのであれば状況を確認しつつサイトの実装のパフォーマンス改善に活かすことが可能です。

Google Search Consoleのメリット

Google Search Consoleのメリットは以下になります。

Google タグマネージャー

Google タグマネージャー（GTM）とは、ウェブサイトやモバイルアプリケーションのタグ管理を一元化するためのツールです。

Google タグマネージャーでいう「タグ」とは、分析ツールやマーケティングツールのコードスニペットを指します。タグはウェブページに埋め込まれ、ユーザーの行動を追跡したり、広告キャンペーンの効果を測定したりするために使われます。

このGoogle タグマネージャーでの設定は、Webサイトやスマホアプリなどで使用することができます。

エンジニアは、このツールを使用するためのセッティングをおこなう必要があり、テーマのヘッダーのheadタグ付近にこのツールから生成されるスニペットコードをコピー＆ペーストしてテーマに反映させる必要があります。

スニペットとは以下のような短いソースコードになりまして、headタグやbodyタグの開始直後に記述します。

Google タグマネージャーのメリット

Google タグマネージャーのメリットは以下になります。

また、Google タグマネージャーを使用すればこの後説明するGoogle Analyticsは必要ないわけではないのでご注意ください。
Google タグマネージャーとGoogle Analyticsを紐付けるイメージになりますので、Google Analyticsのセッティングもしっかりおこないましょう。

まとめると、Google タグマネージャーを使用することで、ウェブサイトやモバイルアプリのタグ管理が効率化され、マーケティングやデータ分析の柔軟性とスピードが向上します。

これにより、マーケティングチームは技術的な障壁を減らし、迅速かつ効果的にキャンペーンを実施することができます。

Google Analytics

Google Analyticsは、ウェブサイトのトラフィックとユーザー行動を分析するための無料ツールです。訪問者のデモグラフィック、行動、コンバージョン率などを詳細に追跡することができます。

このツールに関しても、サイト運営には必須のツールと言っても過言ではありませんが、エンジニアが実装で使用する際に必ずしも必要ではありません。

ただし、エンジニアはこのツールを使用するためのセッティングをおこなう必要があり、テーマのヘッダーのheadタグ付近にこのツールから生成されるスニペットコードをコピー＆ペーストしてテーマに反映させる必要があります。

ただし、Google タグマネージャーを使用する場合は、Google Analyticsのスニペットはコピー＆ペーストせず、Google タグマネージャーのスニペットコードをテーマにコピー＆ペーストしてください。

Google Analyticsのメリット

Google Analyticsのメリットは以下になります。

Google キーワードプランナー

Google キーワードプランナーは、Google Adsのツールの一部で、キーワードのリサーチや新しいキーワードのアイデアを見つけるためのツールです。主に広告キャンペーンのプランニングに使われますが、SEOにも役立ちます。

このツールに関しても、サイト運営には必須のツールと言っても過言ではありませんが、エンジニアが実装で使用する際に必ずしも必要ではありません。

このツールは、サイト運営におけるSEO対策を考慮して記事を作成する際にどのキーワードを選定すべきかをチェックするためのツールになります。

Google キーワードプランナーのメリット

Google キーワードプランナーのメリットは以下になります。

ラッコキーワード

ラッコキーワードは、日本語のキーワードリサーチツールで、特にブログやウェブサイトのSEO対策に使われます。関連キーワードを一覧で表示し、ニッチなキーワードを見つけるのに役立ちます。

このツールに関しても、サイト運営には必須のツールと言っても過言ではありませんが、エンジニアが実装で使用する際に必ずしも必要ではありません。

このツールも本質はGoogle キーワードプランナーと同様に、サイト運営におけるSEO対策を考慮して記事を作成する際にどのキーワードを選定すべきかをチェックするためのツールになります。

ラッコキーワードのメリット

ラッコキーワードのメリットは以下になります。

PageSpeedInsights

PageSpeed Insightsは、Googleが提供するウェブページのパフォーマンスを分析する無料ツールです。ページの読み込み速度やパフォーマンスを評価し、デスクトップとモバイルの両方に対する改善点を提案します。

このツールはエンジニアがWebサイトのSEOの検索順位の改善などにかなり大きく貢献するツールになります。

エンジニアはこのツールが提示してくれる改善すべき項目通りに修正実装をおこないます。

筆者の経験上、このツールに沿ってサイトの修正実装をおこなったところ、ビックキーワードでの自然検索での順位がまさかの1位にまで順位を上げたため、ダイレクトに検索順位の向上に貢献してくれるツールといえます。

PageSpeedInsightsのメリット

PageSpeedInsightsのメリットは以下になります。

リッチリザルトテスト

リッチリザルトテスト（Rich Results Test）は、Googleが提供するツールで、ウェブページがリッチリザルトとして検索結果に表示されるかどうかを確認します。リッチリザルトは、通常の検索結果よりも視覚的に目立つ情報を含む結果のことを指します。

エンジニアは、サイトをリッチリザルトとして検索エンジンの検索結果に表示させるための実装に必ずこのツールを使用します。

リッチリザルトテストのメリット

リッチリザルトテストのメリットは以下になります。

スキーママークアップ検証ツール

スキーママークアップ検証ツール（Structured Data Testing Tool）は、ウェブページに実装された構造化データが正しいかどうかを検証するためのツールです。スキーママークアップは、検索エンジンがページの内容を理解しやすくするためのコードです。

エンジニアは、サイトのマークアップがスキーママークアップとしてちゃんとコーディングされているのかをチェックするために必ずこのツールを使用します。

スキーママークアップ検証ツールのメリット

スキーママークアップ検証ツールのメリットは以下になります。

AIが台頭した今SEO対策に価値はあるのか？

最後に、筆者が考えるChatGPTなどのAIが台頭し、手軽にコミュニケーションベースで高度な情報を手にすることができる今、検索エンジンで情報を提供するWebサイトのSEO対策に価値はあるのか？について意見を述べたいと思います。

結論からいうと、ポジショントーク抜きで「価値はある」と思っております。

その理由は、検索エンジンでしか提供できない付加価値と情報の確かさがあるからです。

上記を説明すると、「AIの良さ」と「検索エンジンの良さ」それぞれあると思っておりまして、「AIの良さ」は、検索エンジン上の情報の領域を超えてユーザーの欲しい情報を非常に柔軟にコミュニケーションベースで手にすることができますが、一方で間違った情報が混在する可能性があるためです。

その一方、検索エンジンでは欲しい情報がヒットせず得られないということがある一方、「検索エンジンの良さ」としてその記事の知識経験にもとづいた確かな情報を得られるという良さがあります。

そのため、これからの時代はAIと検索エンジンの両方を組み合わせて情報を得ていくというのが相乗効果を発揮し、一番合理的な方法だと筆者は考えております。

このように、検索エンジンには検索エンジンの良さがあるため、これからもSEO対策に力を入れていきく価値はあるかと思っております。

まとめ

WordPressでエンジニアがするべきSEO対策を強化する実装方法についての解説は以上になります。

当記事では、WordPressで構築されたサイトに対してエンジニアがすべきSEO対策の実装について徹底的に解説し、当記事一つでお仕事でお役立ていただけるように構成し執筆いたしました。

よろしければぜひ当記事を繰り返しご活用いただけましたら幸いです。