MENU
フリーランスWEB制作で独立
  1. ホーム
  2. WEB制作
  3. SEO
  4. 【基礎編】WordPressテーマ開発者が意識すべきSEO対策の基礎を紹介

【基礎編】WordPressテーマ開発者が意識すべきSEO対策の基礎を紹介

WEB制作 SEO

WordPressのテーマ開発をする際、渡されたデザインカンプをコーディングするだけにしてないでしょうか？

クライアントはWebサイトを活用して集客をしたいと考えている場合が多いです。

そこで大事になってくるスキルがSEOスキルです。

SEOを習得すればWebサイトを通じてユーザーを集める方法を理解する事が出来ます。

この記事を読めばあなたは今後、コーディングだけでなく、更にWeb集客も提案出来る様になります。

ぜひとも最後までご覧ください。

目次

はじめに

テーマを作成する際、

『SEO対策は後からプラグインで行えばいい』

と考えている人も多いかと思います。

しかし、プラグインでのSEO対策はあくまで補助です。

土台であるHTML内の構造がうまく作れて初めてプラグインのSEO対策は効果を最大化します。

そこで、ここからは具体的にテーマ作成する際は具体的にどういうSEO対策を行うべきかについて解説していきます。

HTMLの構造を正しくマークアップする

SEO対策の第一歩目は自分が作ったサイトを検索エンジンに理解しやすい構造にすることです。

検索エンジンに対してどういうサイトかをわかりやすく伝えるために重要なことは以下になります。

  • セマンティックタグを使う
  • 見出しタグを適切に使う

詳しく解説していきます。

セマンティックタグを使う

セマンティックタグとは、よく見かける<main>タグや<section>タグのことです。

全てのセマンティックタグを記載するのは無理があるので１つだけ要点を伝えます。

それは、<div>タグを乱用しないということです。

初めのうちはセマンティックタグの意味が分からず<div>タグを乱用するかもしれません。

しかし<div>タグを活用するのは基本的にデザインの観点で要素をまとめたい時です。

タグにはそれぞれ検索エンジンに構成を伝える役割があります。

これらを意識してセマンティックタグを活用することが大事です。

見出しタグを適切に使う

見出しタグを適切に使うことも重要です。

見出しタグというのは、<h1>〜<h6>のタグです。

これらを使用する際に意識することは、

  • <h1>を二度使用しない
  • きちんと階層構造を意識する

です。

<h1>を使用するのは、使用するページで最も検索エンジンに伝えてたいタイトルの１つだけです。

また、<h2>の後に来るのは<h3>なのに<h4>など別のタグが来るのはNGです。

きちんと順番を守って使用する様にしましょう。

タイトルとディスクリプションの最適化

ここからはタイトルとディスクリプションの最適化について解説していきます。

タイトルとディスクリプションの最適化は、検索エンジンにどういうサイトかを伝えるために重要な作業です。

一つずつ解説していきます。

タイトルの最適化

タイトルの最適化をするためには、以下のコードをfunctions.phpに記述します。

add_theme_support( 'title-tag' );

その後<head>タグ内に以下のコードを記述します。

<?php wp_head(); ?>

これらを記述するだけで大丈夫です。

こちらを記載するだけで、

  • トップページ → 「サイト名」
  • 投稿ページ → 「記事タイトル | サイト名」
  • アーカイブ → 「カテゴリー名 | サイト名」

のようにWordPressが自動でタイトルを設定してくれます。

ディスクリプションの最適化

ディスクリプションを最適化することで検索結果の説明文（スニペット）として出力させます。

これを行うことによりユーザーがクリックしたくなるような説明文をページごとに作成出来ます。

具体的には以下の様なコードをfunctions.phpに記述します。

※Yoast SEOなどのプラグインでディスクリプションの最適化を済ませる場合はこちらの記述は必要ありません。

ifにis_singular()を入れることで、固定ページと投稿ページが当てはまります。

strip_tagsを使用してHTMLタグを取り除いたプレーンな抜粋を使用します。

最後に、この関数を wp_head() アクションにフックすれば完成です。

function my_custom_meta_description() {
  if (is_singular()) {
    global $post;
    $excerpt = strip_tags($post->post_excerpt ? $post->post_excerpt : wp_trim_words($post->post_content, 30));
    echo '<meta name="description" content="' . esc_attr($excerpt) . '">' . "\n";
  }
}
add_action('wp_head', 'my_custom_meta_description');

パーマリンクとURL設計

パーマリンクは検索エンジンとユーザー両方にとって大きな影響を与える重要な要素です。

ちなみにパーマリンクとは、投稿や固定ページごとに割り当てられる「個別のURL」のことです。

https://example.com/?p=123   ← NG（初期状態）
https://example.com/blog/how-to-train   ← OK（意味が伝わる）

このように、意味のあるパーマリンクにすることが重要です。

パーマリンクの設定方法は簡単です。

  1. 管理画面の「設定」→「パーマリンク設定」へ
  2. 「投稿名」やカスタム構造（例：/%category%/%postname%/）を選ぶ

基本的にはこれだけで設定は完了します。

通常のブログ運営者などであれば、これだけで十分です。
しかし、WordPressテーマを開発する場合は、以下の処理も意識する必要があります

  • the_permalink() を使ってリンクを出力する
  • カスタムタクソノミーのURLの構造化

になります。

一つずつ解説していきます。

the_permalink() を使ってリンクを出力する

リンクを出力する際は必ずthe_permalink()を使用します。

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

たとえば、仮に管理画面で /blog/%postname%/ にしていても

<a href="/blog/<?php echo $post->post_name; ?>">リンク</a>

このようにハードコーディングすると仮に構造が変わったらうまく機能しません。

必ずリンクを出力する際はthe_permalink()を使用しましょう。

カスタムタクソノミーのURLの構造化

カスタム投稿に紐づいたカスタムタクソノミーも適切に構造化する必要があります。

具体的には、register_taxonomy() の rewrite パラメータでスラッグを指定します。

register_taxonomy('news_category', 'news', [
  'label' => 'お知らせカテゴリ',
  'public' => true,
  'hierarchical' => true,
  'rewrite' => ['slug' => 'news-category'], // ← ここ
]);

rewrite を省略すると、デフォルトのタクソノミースラッグ（news_category）がそのままURLに使われます。

これはSEOの観点から、URLの意味が伝わりにくくなるため、あまり好ましくありません。

カスタムタクソノミーのスラッグは、英語で内容を表すシンプルな単語に設定するのが望ましいです。

画像のalt属性

画像を使う際に忘れがちなのが imgタグに付随するalt 属性の設定です。

初心者の方はこのalt属性を無視しがちですが、この alt属性はSEOにもユーザビリティにもとても重要な要素です。

理由としては、alt 属性を適切に設定することにより検索エンジンに画像の意味を理解してもらえるからです。

例えば、イベントに関する記事の中でイベントを紹介する画像を使用するとします。

この際、

<img src="seminar.jpg" alt="2025年3月に開催されたSEOセミナーで講演中の様子">

のように、この画像はSEOセミナーに関する講演をしてる画像であるということを検索エンジンに伝える事が出来ます。

こうすれば画像検索の『SEOセミナー』というキーワードでも表示させられる確率が上がります。

仮にメディアライブラリで画像をアップロードする時は、以下の様なコードにします。

<?php
$alt = get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true );
?>
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php echo esc_attr( $alt ); ?>">

このようにalt属性に画像の説明を加えることもSEOの観点でとても重要です。

レスポンシブ対応

現在のGoogle検索では、モバイルでの表示が優先される「モバイルファーストインデックス（MFI）」が導入されています。

つまり、スマホでしっかり表示されるかどうかが、検索順位に影響する時代です。

Googleはパソコン画面よりもモバイル画面の使いやすさを重視しています。

モバイル画面のレスポンシブ対応がうまく出来てなかったらSEOにマイナスです。

具体的にはこちらです。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

しかしこのviewportはvscodeを使っていればemmetを使用すると自動で補完されます。

そこまで意識を向けなくてもいい様な気もしますが、WordPressで<head>を自作している際は自分でコードを書く箇所があります。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <?php wp_head(); ?>
</head>

このような場面の中で、誤ってviewportの設定を抜け落ちてしまう可能性があります。

要は、適切にviewportが設定されているかを意識することが重要です。

まとめ

ここまで読んでいただきありがとうございます。

この記事ではWordPressテーマ開発者が注意すべきSEO対策について解説しました。

ここまでであなたのWordPressテーマ開発の際のSEO対策の基礎は身につきました。

しかしこれはあくまでSEO対策の基礎でしかありません。

現在私はSEO対策の中級者編を作成しています。

今後更に踏み込んだSEO対策を勉強したいと考えている方は、ぜひそちらもご覧ください。

WEB制作 SEO
  • URLをコピーしました！

マサのアバター マサ WordPressエンジニア

京都市在住のマサです。
フリーランスWeb制作者として活動しています。
コーディングがメインです。　
JavaScriptが大好き！
フリーランスWeb制作者を目指してる方に向けて情報発信
趣味：Netflix・英語学習

この著者の記事一覧へ

関連記事

目次