ant2マガジン
2023年06月
2023.06.28
簡単に設定！ant2 CMSでできるSEO対策（3）-ユーザビリティを意識する-
こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
前回は、SEO対策（内部対策）の「ポイント2 クローラーの巡回を促す」についてant2 CMSで行うことができる設定方法をご紹介しました。
今回は最終ポイント！「ポイント3 ユーザビリティを意識する」についてご紹介します！
まずは内部対策のおさらい
SEO対策における内部対策とは
内部対策とは、Webサイト内のコンテンツなどの内部構造などに関する施策を指します。
主な施策としては下記となります。
内部対策のポイント
- コンテンツ内容をクローラーに伝える
- クローラーの巡回を促す
- ユーザビリティを意識する
ant2 CMSで設定できるSEO対策方法
ant2 CMSでは上記のポイントを踏まえた設定を簡単に行うことができます。
今回は過去のメルマガでご紹介してきた設定方法についてポイント別にまとめてご紹介しますので是非参考に設定してください！
今回は 第三回「ポイント3 ユーザビリティを意識する」をメインにant2 CMSで設定できる内部対策をご紹介します。
ポイント3 ユーザビリティを意識する
ユーザビリティとは
ユーザビリティとは、一般的に「使いやすさ」を指します。
ユーザーが簡単に迷うことなくストレスを感じずに目的を果たせることがユーザビリティが高いコンテンツとされています。
特にGoogleではユーザーの利便性を特に重視しており、『Googleが掲げる10の事実』や『ユーザーの利便性に関するガイドライン』にサイトの最適化について掲載されています。
そのため、Googleに対するSEO対策としてはユーザビリティの向上が必須と言えるでしょう。
ant2 CMSで設定できるユーザビリティを意識したWebサイト制作の施策
モバイルフレンドリーとレスポンシブデザインについて
モバイルフレンドリーとは
「モバイルフレンドリー」とは、2015年4月からGoogleが実装したアルゴリズムで、評価基準の一つです。
スマートフォンやタブレットなどのモバイル端末を使用するユーザーがモバイルWebサイトを閲覧した際に、使いやすい・閲覧しやすい状態になっていることを指します。
近年、スマートフォンが世界的に普及し、パソコンよりもモバイル端末を用いてWebサイトを閲覧する人が増えた為、Googleはモバイル端末で検索をするユーザーにとっていかに使いやすいかを重要視するようになったと言われています。
モバイルフレンドリーなサイトを作成するためには？
Googleではモバイルフレンドリーなサイトの構成方法は以下の3つとしています。
- レスポンシブデザイン: ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚系ブラウザなど）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてコンテンツの表示方法を変更します。Google では、実装と維持が最も簡単なデザイン パターンとしてレスポンシブ ウェブ デザインをおすすめしています。
- 動的な配信: デバイスに関係なく同じ URL を使用します。
- 別個のURL: デバイスに応じて別個の URL で異なる HTML を配信します。
Google検索セントラル『モバイルフレンドリーなサイトを作成する』より
レスポンシブデザインとは
ホームページを表示する際にPCやスマートフォンの画面サイズに合わせて表示させるデザインのことを「レスポンシブデザイン」と呼びます。
ホームページを見にきたユーザーの利用デバイスに合わせた表示が可能になります。
昔は、PC版・スマートフォン版のホームページをそれぞれ更新する必要がありました。
しかし、レスポンシブデザインの場合、表示されているデータは共通のものなので、その必要がありません。
更新の作業時間やコストを削減できるだけでなく、Webサイト訪問者のデバイスに合った表示をすることができます。
また、上に記載している通り、モバイルフレンドリーなサイトを作成するためにはレスポンシブデザインでWebサイトが構成されていることがあげられています。
モバイルフレンドリーなサイトになっているかどうかの確認、レスポンシブデザインにする際の注意点などは過去のメルマガをご覧ください。『Google モバイルフレンドリー』『レスポンシブデザインについて』
ant2 CMSのレスポンシブデザイン
ant2 CMSのレスポンシブデザイン対応
ant2 CMSではレスポンシブに対応したデザインを多数ご用意しています！
- 毎月最新のデザインテンプレートをリリース
⇒サイトデザインの変更で簡単にサイトを着せ替えできます - 初期データと呼ばれる業種別ひな形テンプレートも随時リリース
⇒ひな形テンプレートを使って業種に沿ったサイトを制作することができます。
ひな形テンプレートを使用するので時間やコストをかけずに簡単に制作することができます。
ant2 CMSのレスポンシブ対応デザインのご紹介
今回はリリースしたてのデザインをご紹介します！
ant2 CMSを使用すればこちらのレストランや不動産、まつ毛サロンなどのサイトを簡単に作成作成することができます。
| 初期データタイトル |
レストラン［01］（カラー変更）サンプルサイトはこちら |
不動産［01］（カラー変更）サンプルサイトはこちら |
まつげサロン［01］（カラー変更）サンプルサイトはこちら |
|---|---|---|---|
| サイトデザインタイトル | responsive_type42_color | responsive_type41_color | responsive_type40_color |
| PC・スマホでの見え方 |  |
 |
 |
サイトデザインを変更してサイト全体のデザインを変えましょう
ant2 CMSでは簡単にデザイン変更することが可能となっています。
サイトデザインを変更することによってサイトのカラーやレイアウトが変わるので、見え方をがらっと変えることができます。
サイトデザインの変更方法
1．コントロールパネル[作成]＞デザイン[サイトデザインを変える]をクリックします。
2．サイトデザインダイアログが表示されるので【インストール】タブをクリックして
変更したいデザインテンプレートの[追加]ボタンをクリックし、インストールします。
Myデザインタブ
インストールタブ
3．インストールしたデザインが【Myデザイン】に追加されるので使いたいデザインのラジオボタンにチェックをいれ
[OKボタン]をクリックするとデザインが変更されます。
実際にサイトデザインを変更してみました！
変更前
サイト作成時の初期データ：ヘアサロン サンプルサイトはこちら
変更後（サイトデザイン：type35）
「responsive_type35_color」のサイトデザイン変更後のTOP
CONTACTのボタンデザインなどの全体デザインが変更されています
変更後（サイトデザイン：type40）
「responsive_type40_color」のサイトデザイン変更後のTOP
メインメニューのデザインなどの全体デザインが変更されています
業種別ひな形テンプレートやサイトデザインのご確認
今回サイト作成に使用したデザインや変更したサイトデザインはデモ登録いただくと、ご確認いただけます。
今回使用した初期データ（ヘアサロン）以外にも多数業種別テンプレートをご用意していますので
是非、実際にどういったかたちでサイトを作成できるのか、サイトデザインを変更できるのかお試しください！
ページの読み込み速度の最適化（画像容量の軽量化）
画像容量は「ページの表示速度」に非常に関係してきます。
容量が重いとページの読み込み・表示が遅くなり、ユーザーの利便性が低くなってしまいます。
ant2 CMSではサーバーブラウザー内の画像（JPEG形式、PNG形式、GIF形式）を簡単に画像サイズの変更、ロスレス圧縮して画像容量を軽量化させることができます。
※ロスレス圧縮：「可逆圧縮」とも呼ばれ、元のデータを変更することなく圧縮できる方式のこと。
画像サイズを変更する方法
1．コントロールパネル[作成]＞素材[画像の管理]をクリックします。
2．サーバーブラウザーが別ウィンドウで表示されるので
画像サイズを変更したい画像の右上の
を選択し、【サイズの変更】をクリックします。
3．【サイズの変更】をクリックすると、画像のサイズを変更することができるので数値を変更し[保存]をクリックします。
保存後、画像の変更が変更され、容量削減することができます。
サイズ変更前
サイズ変更後
画像を最適化（ロスレス圧縮）する方法
1．コントロールパネル[作成]＞素材[画像の管理]をクリックします。
2．サーバーブラウザーが別ウィンドウで表示されるので
ロスレス圧縮をしたいフォルダを選択し、【最適化チェック】をクリックします。
3．【最適化チェック】をクリックすると、どの程度圧縮できるかがサーバーブラウザー画面右上に表示されるので[最適化を開始する]をクリックします。
4．サーバーブラウザー画面右上に最適化完了メッセージが表示されたら最適化の対応は完了です。
404エラーページを設定する
「404 not found」が表示されるページは通称『404エラーページ』などと呼ばれ、ページに表示される「404 not found」とは、存在しないページにWebサイト訪問者がアクセスしたときにWebサーバーからのレスポンス結果を表すHTTPステータスコードのことを指します。
404 not found（404エラー）が表示される主な原因
- ページのURLが間違っている
URLを手入力する場合などに起こるスペルミスで正しいページにアクセスできず404 not found（404エラー）が起こります - ページ自体が削除されている・ページのリンク切れ
削除されたページのリンクにアクセスした場合にも404 not found（404エラー）が起こります
また、内部サイトのリンク切れだけでなく、外部サイトのリンクをはっている場合は知らないうちにページが削除されアクセスできないことがあります - 古いURLから新しいURLへ正しくリダイレクトができていない
サイトのリニューアルやドメイン移行をした際にリダイレクトの設定を正しく行っていない場合も404 not found（404エラー）が起こります
404 not found（404エラー）が表示されること自体は正常な動作なため、存在していても問題はありません。
しかし、404 not found（404エラー）が表示されることにより、せっかくWebサイトに訪問してくれたユーザーは閲覧したかったページを閲覧できず、そのままサイトを離脱してしまう可能性があります。
そのため、サイト内のリンク切れなど404 not found（404エラー）へのアクセスに繋がらないように工夫し、対応する必要があります。
対応としては、リンク切れやその他の理由で404 not found（404エラー）が表示された場合でもユーザビリティに考慮したカスタム404ページを作成することで、ユーザーの離脱を防ぐことができます。
ant2 CMSで作成するカスタム404エラーページ
ant2 CMSではカスタム404エラーページを簡単に作成することができます！
カスタム404エラーページの作成方法
1．コントロールパネルの[作成]＞ [コンテンツ管理] ＞ [ページリスト]をクリックし、“ページリストダイアログ”を表示します
2．[追加]ボタンをクリックして、新規コンテンツを追加します
404エラーページのコンテンツのタイトル（例：お探しのページが見つかりません。）を入力し、
コンテンツの種類から「フリーページ」を選択し、URLに「404」と小文字の半角数字で入力します。
3．[保存]ボタンをクリックし、404エラーページを登録します
4．再度“ページリストダイアログ”を表示させ、一覧の中から先ほど追加した404エラーページのタイトル右上にある[別ウィンドウでこのURLを見る]アイコンをクリックして、404エラーページを表示させます
5．フリーページと同様にダイレクト編集やコンテンツパーツができるので、カスタム404エラーページの内容を編集します
6．カスタム404エラーページの編集後、[サイト公開]ボタンをクリックし編集画面からログアウトします
ログアウト後、サイトのアドレスの後ろに何か適当な文字を入力して404エラーページを表示させます。
7．作成したカスタム404エラーページが表示されれば完成です
まとめ
今回はSEO対策 第三回「ユーザビリティを意識する」をご紹介しました。
全3回にわけてポイント別にant2 CMSで設定できるSEO対策をご紹介してきましたがいかがでしたでしょうか。
自分でいちから対策していくとなると大変かもしれません。
しかし、ant2 CMSではCMS上で簡単に下記の設定をすることができます。
是非この機会にant2 CMSのSEO対策をご検討ください。
- メタタグ（タイトルタグ・メタディスクリプション）を設定する
- 見出しタグ（hタグ）を設定し、ルールに沿って設定する
- 画像にalt属性を設定する
- サイトマップを作成する
- クローラー制御（noindex・nofollow・noarchive）を設定する
- Google SearchConsoleと連携する
ポイント3 ユーザビリティを意識する
- モバイルフレンドリー・レスポンシブデザインのサイトにする
- ページの読み込み速度の最適化（画像容量の軽量化）
- 404エラーページを設定する
2023.06.14
簡単に設定！ant2 CMSでできるSEO対策（2）-クローラーの巡回を促す-
こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
前回は、SEO対策（内部対策）の「ポイント1 コンテンツ内容をクローラーに伝える」についてant2 CMSで行うことができる設定方法をご紹介しました。
今回は「ポイント2 クローラーの巡回を促す」についてご紹介します！
まずは内部対策のおさらい
SEO対策における内部対策とは
内部対策とは、Webサイト内のコンテンツなどの内部構造などに関する施策を指します。
主な施策としては下記となります。
内部対策のポイント
- コンテンツ内容をクローラーに伝える
- クローラーの巡回を促す
- ユーザビリティを意識する
ant2 CMSで設定できるSEO対策方法
ant2 CMSでは上記のポイントを踏まえた設定を簡単に行うことができます。
今回は過去のメルマガでご紹介してきた設定方法についてポイント別にまとめてご紹介しますので是非参考に設定してください！
今回は 第二回「ポイント2 クローラーの巡回を促す」をメインにant2 CMSで設定できる内部対策をご紹介します。
ポイント2 クローラーの巡回を促す
ポイント1の施策後には、クローラーにページを再度登録（インデックス）してもらう必要があります。
せっかくポイント1の施策を行っていても、サイトやページを再評価してもらわないことにはSEO対策としては不十分です。
そこで、今回はant2 CMSで行うことができるクローラー巡回の施策をご紹介します。
ant2 CMSで設定できる施策
サイトマップを作成する
サイトマップとは、サイト内の全体のページ構造をわかりやすく地図のように一覧で記載しているページのことを指し、ユーザーや検索エンジンにサイトにどのようなコンテンツがあるのかを伝える役割を果たしています。
サイトマップについて
サイトマップには2種類のファイル形式があります。
- HTMLサイトマップ
- XMLサイトマップ
サイトマップの違い
2種類のサイトマップはどちらも似た役割を担っていますが、明確な違いとしては「誰にむけたサイトマップか」という点があげられます。
- HTMLサイトマップ
ユーザーにサイト内にどのようなコンテンツ（ページ）があるかを伝えることを目的としたサイトマップ - XMLサイトマップ
GoogleやYahoo!などの検索エンジンにサイト内のクロールしてほしいコンテンツ（ページ）を伝えることを目的としたサイトマップ
サイトマップについて詳しくはこちら『SEO対策に効果的？サイトマップの種類と作成について』
サイトマップの作成方法
ant2 CMSで作成できるHTML・XMLサイトマップの作成方法をご紹介します。
HTMLサイトマップの作成方法
1．コントロールパネル[作成]＞コンテンツ管理[ページリスト]をクリック
2．ページリストからページタイトルとURL、ページの種類（サイトマップ）を選択してサイトマップページを作成
3．ウィンドウアイコンをクリック
4．HTMLサイトマップが作成されていることを確認
※表示デザインはテンプレートによって異なります
※注意点ステータスを【非公開】にしているページはHTMLサイトマップに表示されないためご注意ください。
（編集サイトでは非公開のページも表示されますが、公開サイトでは表示されません）
XMLサイトマップの作成方法
1．コントロールパネル[設定]＞SEO対策[サイトをGoogleに登録]をクリック
2．Google Search Consoleダイアログが表示されるので[サイトマップ自動作成]をクリック
3．XMLサイトマップが自動作成されます
XMLサイトマップの停止・更新について
ファイル自体の更新は、サイト公開によってされます。
停止するとファイルが削除され、作成するボタンを押すと新たに作成（その時点の公開サイトの状態でファイルは作成される）されます。
クローラー制御（noindex・nofollow・noarchive）を設定する
メタタグのname属性の値を指定することで、指定した検索エンジンのみを対象としてクローラーの動作を制御することができます。
| name属性 | 制限内容 |
|---|---|
| noindex | Webページをインデックスされないようにする |
| nofollow | クロールの際にページからのリンクを追跡しないようにする |
| noarchive | 検索結果にページへのキャッシュ リンクを表示しないようにする |
クローラー制御の設定方法
クローラー制御を設定したいページで右クリック＞ショートカットメニューから「メタタグ」-「メタタグの登録」を開き、クローラー制御の設定したい項目にチェックをいれることで設定を行うことができます。
GoogleSearchConsoleにWebサイトを登録してできること
主にGoogle Search ConsoleでWebサイトの管理を行うことができます
- Google がサイトを検出してクロールできることを確認する。
- インデックス登録に関する問題を修正し、新規コンテンツや更新したコンテンツのインデックス再登録をリクエストする。
- サイトの Google 検索トラフィック データ（サイトが Google 検索結果に表示される頻度、サイトが表示されたときの検索クエリ、検索クエリに対して検索ユーザーがクリックスルーする頻度など）を表示する。
- Google がインデックス登録やスパムなどのサイトに関する問題を検出したときにアラートを受信する。
- ウェブサイトにリンクしているサイトを表示する。
- AMP、モバイル ユーザビリティ、その他の検索機能に関する問題を解決する。
Google SearchConsoleの連携方法
Google SearchConsoleの連携方法は2種類あります。
今回はより簡単に連携することができる「URLプレフィックスでの連携」をメインにご紹介します。
URLプレフィックスでの連携方法
1．Google Search Consoleダイアログに表示されている「Google Search Console」にアクセス
2．プロパティタイプ【URLプレフィックス】を選択し、サイトURLを入力後[続行]をクリック
3．所有者の確認画面でその他の確認方法[HTMLタグ]をクリック
4．メタタグが表示されるので[コピー]ボタンをクリック
5．Google Search Consoleの画面はそのままにCMSの編集画面に戻り、
Google Search Consoleダイアログの《メタ タグ》に、先ほどコピーしたメタタグを貼り付ける
6．[ＯＫ]ボタンをクリックしてダイアログを閉じ、サイトの[サイト公開]をクリック
※サイト公開をクリックすることでメタタグが反映されます
7．Google Search Consoleの画面に戻り[HTMLタグ]の[確認]ボタンをクリックし、所有者の証明を証行う
ドメインでの連携方法
1．Google Search Consoleダイアログに表示されている「Google Search Console」にアクセス
2．プロパティタイプ【ドメイン】を選択し、サイトURLを入力後[続行]をクリック
3．“DNS レコードでのドメイン所有権の確認”のレコードタイプは「TXT」を選択し、表示されるTXTレコードの[コピー]ボタンをクリック
4．ドメインのDNS情報が設定できる管理画面にアクセスし、該当ドメインのDNS情報に取得したTXTレコードを追加
5．Google Search Consoleの画面に戻り“DNS レコードでのドメイン所有権の確認”の下に表示される[確認]をクリックし、所有者の証明を証行う
6．「所有権を確認しました」と表示されたらプロパティの追加完了
XMLサイトマップを作った後は…
コントロールパネルの[サイト公開]を押下することでXMLサイトマップは更新されます。
更新された後はより早くクローラーにクローリングしてもらうためにGoogleSearchConsoleにXMLサイトマップを送信しましょう！
Google SearchConsoleでXMLサイトマップを送信する方法
1．画面左メニューの「インデックス」から「サイトマップ」をクリック
2．【新しいサイトマップの追加】に「/sitemap.xml」を送信する
送信が完了したサイトマップはステータスに「成功しました」と表示されます
※注意点
デモサイトなどの無料で作成できるサイトはクローラー制御されているためサイトマップは送信できませんのでご注意ください。
その他クローラー制御の設定を行っているページはクローリングされませんのでご注意ください。
まとめ
前回の「コンテンツ内容をクローラーに伝える」に引き続き、今回はSEO対策 第二回「クローラーの巡回を促す」をご紹介しました。
せっかく第一回でコンテンツ内容をクローラーにわかりやすく設定しても、クローラーに届かなければSEO対策としては不十分です。
ant2 CMSではクローリングされたくない場合にはクローラー制御の設定、クローリングしてほしい時にはサイトマップを更新してGoogleSearchConsoleに送信が可能となっております。
是非、第一回目にお伝えした設定だけでなく今回ご紹介したクローラーに巡回を促す設定も行ってみてはいかがでしょうか。
- 1 / 1
