WordPressでオリジナルテーマを使うと、SEO対策も自分で自由に調整できます。 今回は、基本的かつ効果の高いSEO対策10項目と、それぞれの具体的な実装方法を紹介します。 SEO対策10項目とその実装例 ① タイトルタグの自動出力 functions.php に以下を追加することで、<title>が自動出力されるようになります。 コピー add_theme_support('title-tag'); ② メタディスクリプションの追加 header.php 内の <head> タグ内に、以下のように記述します。 コピー <meta name="description" content="このサイトは、初心者向けにHTMLとCSSを解説しています。"> ③ セマンティックなHTML構造 セクションやコンテンツの役割ごとに適切なHTML5タグを使用します。 コピー <main> <section> <h2>サービス紹介</h2> <p>...</p> </section> </main> ④ hタグの適切な使い分け <h1>はページに1つだけ。見出し階層は論理的に。 コピー <h1>サイトのタイトル</h1> <h2>サービス紹介</h2> <h3>トリミングについて</h3> ⑤ 画像にalt属性を追加 画像の内容を伝えるテキストをalt属性に記述します。 コピー <img src="dog.jpg" alt="元気な保護犬の写真"> ⑥ パンくずリストの設置 ナビゲーションの一部として以下のように記述。構造化データにも使えます。 コピー <nav class="breadcrumb"> <a href="/">ホーム</a> > <a href="/blog/">ブログ</a> > <span>この記事のタイトル</span> </nav> ⑦ JSON-LD構造化データの追加 header.php に以下を挿入して、検索結果に情報を渡します。 コピー <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "HPBUILD", "url": "https://www.hpbuild.net" } </script> ⑧ 表示速度の改善（画像の遅延読み込み） functions.php に以下を追加して、画像のLazyLoadを有効にします。 コピー add_filter('wp_lazy_loading_enabled', '__return_true'); ⑨ モバイル対応 <head>内に以下のviewportタグを記述し、レスポンシブ対応をします。 コピー <meta name="viewport" content="width=device-width, initial-scale=1.0"> ⑩ SEOプラグインの導入 All in One SEOやYoast SEOをインストールすると、タイトル・メタ情報・構造化データなどをGUIで設定可能になります。 コピー プラグイン > 新規追加 > 「All in One SEO」または「Yoast SEO」で検索してインストール まとめ オリジナルテーマだからこそ、SEO対策も自分の手で柔軟に調整できます。まずは①〜⑤の基本対策から着手し、⑥〜⑩へと段階的に進めていくと無理なく実装できます。 次回は「SEOスコアを上げるLighthouse対策」や「検索結果に目立つ構造化データ活用法」について解説予定です。
