AIで作ったHTMLサイトのSEO設定をしてみた。titleタグ・構造化データ・サイトマップとは？

前回は、WordPressブログとHTMLコーポレートサイトを分けて運用する話をしました。

前回の記事はこちらです。

WordPressブログとHTMLサイトを分けて運用してみた。使い分けの考え方とは？

AIで作ったHTMLサイトのSEO設定をしてみた

今回のコーポレートサイトは、WordPressではなく、静的HTMLサイトです。

そのため、SEOプラグインは使っていません。

ページごとのHTMLに、必要な設定を直接入れています。

今回、確認したSEO設定

titleタグ
meta description
canonicalタグ
OGPタグ
Twitterカード
構造化データ
robots.txt
sitemap.xml
内部リンク
URL形式
スマホ表示
表示速度

こうして並べると、意外と多いです。

ただ、ひとつずつ確認すれば、静的HTMLサイトでも十分に対応できます。

HTMLサイトでも、SEO対策はできるのか？

HTMLサイトでも、SEO対策はできます。

WordPressでなければSEOができない、ということはありません。

大切なのは、検索エンジンと読者に、ページの内容を分かりやすく伝えることです。

SEO設定で大切なこと

ページの内容が、分かるタイトルにする
検索結果で、内容が伝わる説明文を書く
正規URLを、明確にする
ページ同士を、内部リンクでつなぐ
検索エンジンに、サイトマップを伝える
スマホで、読みやすくする
表示速度を、極端に重くしない

SEOは、特別な裏技ではありません。

ページを分かりやすく整えることが、基本です。

今回のサイトでも、その基本をひとつずつ確認しました。

titleタグを、ページごとに設定した

まず大切なのが、titleタグです。

titleタグは、検索結果やブラウザのタブに表示されるタイトルです。

ページの内容を、短く分かりやすく伝える必要があります。

今回のtitleタグの考え方

今回のコーポレートサイトでは、ページごとにtitleタグを設定しました。

例えば、次のような形です。

トップページ：このは屋合同会社｜自分の商売を、自分で育てる。
進め方ガイド：進め方ガイド｜このは屋合同会社
選ばれる理由：選ばれる理由｜このは屋合同会社
会社概要：会社概要｜このは屋合同会社
AI時代のDIY：AI時代のDIY｜このは屋合同会社

本文中やヘッダーでは、「このは屋」という表記を使っています。

ただ、検索結果では既存サイトと区別しやすいように、「このは屋合同会社」を入れました。

ここは、サイト名の見せ方として大切にした部分です。

titleタグで気をつけたこと

ページ内容が、分かるようにする
会社名を、入れる
長くなりすぎないようにする
検索結果で、不自然に見えないようにする
全ページで、同じタイトルにならないようにする

titleタグは、SEOの基本です。

でも、基本ほど大切です。

meta descriptionを、ページごとに書いた

meta descriptionは、検索結果に表示されることがある説明文です。

必ずそのまま表示されるわけではありません。

それでも、ページ内容を整理するために、設定しておく価値があります。

descriptionで意識したこと

ページ内容を、短く説明する
読者にとって、何が分かるページかを伝える
不自然にキーワードを、詰め込まない
ページごとに、内容を変える
会社サイトとして、落ち着いた表現にする

descriptionは、広告文ではありません。

読者が検索結果を見たときに、「このページは何のページか」が分かるようにするものです。

今回も、売り込み感を出しすぎないようにしました。

canonicalタグで、正規URLを指定した

canonicalタグは、検索エンジンに正規URLを伝えるためのタグです。

今回のサイトでは、URLから「.html」を消しています。

そのため、canonicalタグも、拡張子なしURLにそろえました。

canonicalタグをそろえた理由

例えば、次の2つのURLがあるとします。

https://conohaya.com/guide
https://conohaya.com/guide.html

中身が同じでも、URLとしては別です。

検索エンジンにとっても、どちらが正規URLなのか分かりにくくなります。

そのため、今回の正規URLは、拡張子なしに統一しました。

統一したもの

ブラウザで表示するURL
サイト内リンク
canonicalタグ
sitemap.xml
構造化データ内のURL

URLの表記がそろっていると、サイト全体が整理されます。

これは、SEOだけでなく、運用面でも大切です。

OGPタグとTwitterカードを設定した

OGPタグは、SNSやチャットでURLが共有されたときの表示に関わります。

前回までの記事でも触れましたが、今回のサイトでは、OGP画像も用意しました。

OGP画像については、こちらの記事で詳しく書いています。

AIでOGP画像を作ってみた。SNSで見えるサイト画像の作り方とは？

設定した主な項目

og:type
og:site_name
og:title
og:description
og:url
og:image
og:image:width
og:image:height
twitter:card
twitter:image

OGPタグは、直接SEO順位を上げるものではありません。

ただ、共有されたときの見え方に関わります。

サイトの印象を整える意味で、大切な設定です。

構造化データを設定した

今回のサイトでは、構造化データも設定しました。

構造化データとは、ページの情報を検索エンジンに分かりやすく伝えるための記述です。

少し専門的に聞こえますが、要するに、ページの情報を整理して伝えるためのものです。

設定した構造化データ

今回のサイトでは、主に次のような情報を設定しました。

WebSite
Organization
WebPage
BreadcrumbList
FAQPage

FAQページでは、FAQPageの構造化データも設定しました。

ページ内容に合った構造化データを入れることで、検索エンジンに内容を伝えやすくなります。

構造化データは、確認が必要

構造化データは、書けば終わりではありません。

間違いがあると、正しく読み取られないことがあります。

そのため、公開後にリッチリザルトテストで確認しました。

また、Search Consoleでも、URL検査を行いました。

robots.txtを作成した

robots.txtは、検索エンジン向けの案内ファイルです。

検索エンジンのクローラーに対して、サイトのクロールに関する情報を伝えるために使われます。

今回のサイトでも、robots.txtを作成しました。

robots.txtで行ったこと

検索エンジンに、サイトマップの場所を伝える
必要なページが、クロールされるようにする
公開サイトとして、基本的な案内を置く

robots.txtは、複雑にしすぎる必要はありません。

今回も、シンプルな設定にしました。

大切なのは、sitemap.xmlの場所が分かることです。

sitemap.xmlを作成した

sitemap.xmlは、サイト内のURLを検索エンジンに伝えるためのファイルです。

今回のような静的HTMLサイトでは、自分で用意する必要があります。

sitemap.xmlに入れたページ

今回のサイトマップには、主に次のページを入れました。

サイトマップ内のURLも、拡張子なしにそろえました。

サイト内リンク、canonicalタグ、sitemap.xmlのURLを統一することが大切だからです。

Search Consoleで確認した

公開後は、Search Consoleでも確認しました。

Search Consoleは、Googleにサイトの状態を確認するためのツールです。

Search Consoleで行ったこと

サイトマップを、送信する
URL検査を、行う
インデックス登録の状態を、確認する
問題が出ていないか、見る

サイトを公開したら、ただ待つだけではなく、Search Consoleで確認すると安心です。

特に、新しく作ったHTMLサイトでは、サイトマップ送信をしておくと、状態を把握しやすくなります。

内部リンクも、SEO設定の一部

SEO設定というと、タグやサイトマップに目が行きがちです。

でも、内部リンクも大切です。

内部リンクとは、自分のサイト内のページ同士をつなぐリンクのことです。

内部リンクで意識したこと

関連するページへ、自然にリンクする
トップページから、主要ページへ進めるようにする
フッターから、各ページへ行けるようにする
CTAページへの導線を、用意する
ブログ記事から、実物のページへリンクする

この実践記でも、コーポレートサイトへのリンクを入れています。

読者が実物を見られるだけでなく、サイト同士の関係も分かりやすくなります。

スマホ表示も、SEOに関わる

SEOでは、スマホ表示も大切です。

今は、多くの人がスマホでサイトを見ます。

そのため、スマホで読みにくいサイトは、読者にとって良くありません。

スマホ表示で確認したこと

文字が、小さすぎないか？
見出しが、読みやすいか？
メニューが、使いやすいか？
フォームが、入力しやすいか？
リンクが、押しやすいか？
スクロールが、カクつかないか？
改行が、不自然でないか？

スマホ表示については、こちらの記事でも詳しく書きました。

AIで作ったサイトのスマホ改行を整えてみた。日本語表示の調整方法とは？

表示速度も確認した

表示速度も、今回かなり確認しました。

Webフォントや画像を使うと、サイトが重くなる可能性があります。

ただ、設定を整えることで、軽くできます。

表示速度で確認したこと

画像が、重すぎないか？
AVIFやWebPを、使えるか？
フォントが、キャッシュされるか？
不要な外部読み込みが、多くないか？
スマホで、体感的に遅くないか？

ページ速度測定でも、高得点を確認できました。

ただし、点数は環境やタイミングで変わります。

そのため、点数だけでなく、実際の表示感も見るようにしました。

AIは、SEO設定の確認にも役立った

今回、SEO設定の確認にもAIを使いました。

AIは、チェックリストを作るのが得意です。

静的HTMLサイトでは、WordPressプラグインのような自動設定がないため、確認項目の洗い出しが役立ちました。

AIに相談したこと

各ページに、必要なmetaタグは入っているか？
canonicalタグは、正しいか？
OGPタグは、足りているか？
構造化データに、問題はないか？
sitemap.xmlに、必要なURLが入っているか？
URL形式が、統一されているか？

ただし、AIの確認だけで終わりにはしません。

Search Consoleやリッチリザルトテストなど、実際のツールでも確認しました。

SEO設定で、やりすぎないことも大切

SEO設定は大切です。

ただし、やりすぎると、不自然になります。

特に、キーワードを無理に詰め込むのはおすすめしません。

避けたいこと

titleタグに、キーワードを詰め込みすぎる
descriptionを、広告文のようにする
ページ内容と関係ない言葉を、入れる
内部リンクを、不自然に増やしすぎる
読者より、検索エンジンだけを見る

SEOは、読者に分かりやすくするための整理です。

検索エンジンだけを見てしまうと、文章もサイトも不自然になります。

静的HTMLサイトでSEO設定するときの注意点

静的HTMLサイトでSEO設定をする場合、注意点があります。

注意点1：ページごとに設定する

WordPressのように、管理画面やプラグインでまとめて設定できるわけではありません。

HTMLファイルごとに、titleやdescriptionを確認する必要があります。

注意点2：URLを統一する

URL表記がバラバラになると、管理しづらくなります。

表示URL
canonicalタグ
内部リンク
sitemap.xml
構造化データ

これらを、同じ形式にそろえることが大切です。

注意点3：公開後に確認する

ローカルで設定しても、公開後に読み込まれていないことがあります。

そのため、公開URLで確認します。

ページが、正しく表示されるか？
metaタグが、入っているか？
サイトマップが、開けるか？
構造化データに、エラーがないか？

設定したつもりでも、公開環境で確認することが大切です。

まとめ

今回は、AIで作ったHTMLサイトのSEO設定についてお話ししました。

要点をまとめます。

静的HTMLサイトでも、基本的なSEO設定はできる
titleタグとdescriptionは、ページごとに設定する
canonicalタグで、正規URLを伝える
OGPタグやTwitterカードで、共有時の見え方を整える
構造化データで、ページ情報を整理して伝える
robots.txtとsitemap.xmlを、用意する
Search Consoleで、サイトマップ送信とURL検査を行う
内部リンク、スマホ表示、表示速度も、SEOに関わる
AIは、チェックリスト作成や確認に役立つ
ただし、最終確認は実際のツールで行う

SEO設定は、派手な作業ではありません。

でも、公開するサイトでは、とても大切です。

特に静的HTMLサイトでは、自分で設定する部分が多くなります。

AIに相談しながら、ひとつずつ確認していくのがおすすめです。

実際のコーポレートサイトはこちらです。

このは屋のコーポレートサイトを見る

このは屋

このは屋｜自分の商売を、自分で育てる。 AIとテンプレートを味方に、外注業者へ依存せず、商売の仕組みを自分の手でつくるための学び舎。

あなたがHTMLサイトを作る場合も、見た目だけでなく、検索エンジンに伝える設定まで確認してみてください。

title
description
canonical
サイトマップ

まずは、このあたりから見直すだけでも、サイトの土台が整います。

次回は、AIで作ったサイトのフォームまわりについてお話しします。

お問い合わせフォーム、テンプレート申込フォーム、reCAPTCHA表示など、実際に調整したことを整理します。