BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

【どこよりも詳しい】実務で使えるAll in One SEOの設定方法と使い方

更新日:2021/07/08

【どこよりも詳しい】実務で使えるAll in One SEOの設定方法と使い方
2020年末にAll in One SEO Packがメジャーアップデートされ、UIや機能面が大きく変わりました

新しいバージョンになったことで管理画面がガラッと変わり、どこで何を設定すればいいか戸惑っている方も多いのではないでしょうか

筆者もその一人で、慣れていないこともありいつもより工数をかけてしまっていました

そこで、同じように悩まれている方のためにも、今後迷わずさくっと設定できるように記事にまとめたいと思います

ここで紹介している設定ができれば実務レベルでOKな内容となっていますので初心者の方でも安心して読み進めていただけます

また、よくある一般的な設定だけではなく、痒い所に手が届くような内容もしっかりと説明しています

少し長めの記事なので辞書的な感覚で必要なところだけ読んでいただいてもOKです!

それでは早速説明に入ります!

1.今回のデモサイトの構成について

今回のデモサイトの構成は以下の通りです
こういった一覧をエクセルで先方からいただくことはよくありますよね
1.今回のデモサイトの構成について

タイトルとキャッチフレーズを分ける文字がパイプ( | )であったり、TOPページと下層ページで微妙に文言が違いますね!
1.今回のデモサイトの構成について
このあたりに注意して設定を行っていく必要があります!

・お知らせ「/news/」はカスタム投稿です
・お問い合わせページは固定ページで作成することを想定しています
・静的コーディング時のmetaタグやtitleタグが残っている場合は削除しておいてください

全体の仕様がわかったところで、早速設定していきます!

2.All in One SEOをインストールして有効化する

まず、以下の手順でAll in One SEOをインストールして有効化します

  1. 1. プラグインをクリック
  2. 2.「All in One SEO」と入力
  3. 3.「今すぐインストール」をクリックし、有効化

2.All in One SEOをインストールして有効化する

有効化すると以下のような画面になるので、「ダッシュボードに戻る」をクリックしましょう
2.All in One SEOをインストールして有効化する

3.設定する項目について

設定すべき項目は以下になります
3.設定する項目について

上記にも記載しましたが、一部アーカイブページでは出力されないものがあるので、
それに関してはPHPファイルに直接記述する必要があります(のちほど説明します)

それでは早速、設定を行っていきましょう!

4.設定する(metaタグ)

まずは区切り文字をデフォルトから変更しましょう!

4.0 区切り文字

検索の外観をクリックし、区切り文字を変更します
今回の場合だと区切り文字はパイプなので、以下の赤枠のものを選択します
4.0 区切り文字

そうすると、以下赤枠の「プレビュー」の部分が変わったことがわかります!
4.0 区切り文字
最後に、右上の「変更を保存」を押しましょう

これでどのページにおいても、タイトルとキャッチフレーズの区切り文字がパイプになりました!

4.1 タイトル

続いてはタイトル設定です

TOPページ、アーカイブページ、詳細ページ、固定ページと色々ありますが、それぞれで設定箇所が異なります!

少し長くなりますが詳しく解説するので付いてきてくださいね!
それではいきましょう!

4.1.1 TOPページ

まずはTOPページからです

先ほどの区切り文字を設定したブロックの下に、以下の「ホームページ」と書かれたブロックがあります
ここで、TOPページのタイトルやディスクリプションを設定します
4.1.1 TOPページ

以下の、②に関しては先ほど設定した区切り文字と連動しています
4.1.1 TOPページ

上記の①と③は以下の「設定」>「一般」の赤枠部分と連動しています!
4.1.1 TOPページ

そのため、以下のように変更し、ページ下部にある「変更を保存」をクリックしましょう
4.1.1 TOPページ

4.1.2 お知らせ一覧ページ

続いて、お知らせ(/news/)のタイトル設定です
以下赤枠の「アーカイブ」をクリックしてください
4.1.2 お知らせ一覧ページ

下の方にスクロールすると、カスタム投稿「お知らせ」のアーカイブページ設定エリアが現れます
4.1.2 お知らせ一覧ページ

現在、フロントでどのようになっているかというと、以下のようになっています
4.1.2 お知らせ一覧ページ

※Chromeの拡張機能のTDK Meta Checkerというものを使っています。とても便利なので入れておくことをオススメします
TDK Meta Checker

上記の通り、カスタム投稿のタイトルと、サイトのタイトルが区切り文字によって分けられています

カスタム投稿のタイトルとは、カスタム投稿を登録した際に自由に設定するタイトルのことです

仕様だと、「お知らせ一覧|株式会社テスト」にしないといけないので、変更していきます

といってもやり方は簡単です
以下のように、「一覧」という文言を追加してあげればOKです
4.1.2 お知らせ一覧ページ
これで、再度フロントにて確認すると、「お知らせ一覧|株式会社テスト」となっていることを確認できます

4.1.3 お知らせタクソノミーアーカイブページ

仕様では「カテゴリ名 | 株式会社テスト」と指定がありましたね

タクソノミーについては、まず以下の赤枠をクリックします
4.1.3 お知らせタクソノミーアーカイブページ

下の方にスクロールすると、「お知らせカテゴリー」という、お知らせのタクソノミーアーカイブページの設定を行うことができるエリアがあります
4.1.3 お知らせタクソノミーアーカイブページ

上記赤枠の「お知らせカテゴリー」という名前は、タクソノミーを登録する際に設定する以下の内容と一致しています

以下赤枠は、タクソノミーのターム名を表しています
そのため、すでに「カテゴリ名 | 株式会社テスト」という仕様を満たしている状態なので今回は変更不要です!
4.1.3 お知らせタクソノミーアーカイブページ

フロントを確認すると、以下のように「カテゴリ名|株式会社テスト」となっていますね!
(※お知らせカテゴリーのタームとして、「ニュースカテゴリ1」を登録している状態です)
4.1.3 お知らせタクソノミーアーカイブページ

4.1.4 お知らせ記事詳細ページ

記事詳細に関しては、記事編集画面にて設定が可能です

今回、説明用にタイトルが「テスト」という投稿を用意しました
その記事編集画面に行き、下の方にスクロールすると以下赤枠があります
4.1.4 お知らせ記事詳細ページ
タイトルなどの設定は上記の赤枠で設定ができます
「スニペットプレビュー」を見るとわかるように、すでに「記事名|株式会社テスト」となっているため特に変更を加える必要はありません

4.1.5 お問い合わせページ

お問い合わせページについては、今回は固定ページで作成することを想定しています
そのため、固定ページの設定エリアに移動します

以下の、「コンテンツタイプ」をクリックし、
4.1.5 お問い合わせページ
下の方にスクロールすると、「固定ページ」というエリアがあります
4.1.5 お問い合わせページ

仕様では、
「お問い合わせ | 株式会社テスト」
「お問い合わせ(確認) | 株式会社テスト」
「お問い合わせ(完了) | 株式会社テスト」
となっていましたね

上記の赤枠をみるとわかるように、仕様通りにするためには、固定ページを作成する際のタイトルを変更すればいいことがわかります

つまり、以下のようにすればいいということですね!
4.1.5 お問い合わせページ

もし、仕様がどのページも「お問い合わせ | 株式会社テスト」だった場合は、
たとえば、確認ページの編集画面に移動し、以下赤枠部分を「お問い合わせ」と手入力で変更すればOKです
4.1.5 お問い合わせページ

以上でタイトルの設定が完了しました!

続いては、ディスクリプションの設定です!

4.2 ディスクリプション

(長くなってきましたが付いてきてくださいね笑)

改めて仕様を確認すると以下の通りです
4.2 ディスクリプション
それでは、TOPページからディスクリプションの設定を行っていきましょう!

4.2.1 TOPページ

TOPページのタイトル設定で使用した以下の画像を再掲します
4.2  ディスクリプション

上記の、「メタ説明」という項目がディスクリプションです
現在はキャッチフレーズの「東京のWEB制作会社 」と連動しているので、以下のように変更しましょう
4.2  ディスクリプション

念のためフロントでも確認してみましょう
4.2  ディスクリプション
上記の通り、ちゃんと変わっています

※OGタイトルやディスクリプションについてはこの後説明しますが、今行っているmetaの設定がそのまま連動して反映されるため別途設定する必要はありません

4.2.2 お知らせ一覧ページ

お知らせ一覧ページの設定エリアに移動し、以下の赤枠に手入力で設定します
4.2.2 お知らせ一覧ページ

仕様通りに以下赤枠のように設定できたら、「変更を保存」を押しましょう
4.2.2 お知らせ一覧ページ

フロントで確認すると、ちゃんと反映されていることがわかります
4.2.2 お知らせ一覧ページ

※OGPに関しては、アーカイブページ(タクソノミーアーカイブなども含む)で出力されないため、自分でPHPファイルに書く必要があります。それについては後ほど説明します

4.2.3 お知らせタクソノミーアーカイブページ

4.2.2の説明と同じなので詳しい説明は割愛します
タクソノミーアーカイブの設定エリアに移動し、手入力で仕様の通り記述して「変更を保存」を押せばOKです

4.2.4 お知らせ記事詳細ページ

記事詳細に関しては、記事編集画面にて設定が可能です

詳細ページに行き、下の方にスクロールすると以下のようなエリアがあります
デフォルトでは記事の内容の160文字抜粋ということになっています
4.2.4 お知らせ記事詳細ページ
デフォルトのままでもいいですが、変なところで抜粋される可能性があるので、最適化したい場合はここに手入力で記載すればOKです

4.2.5 お問い合わせページ

お問い合わせページは固定ページで作成することを想定しているため、固定ページの編集画面に移動します
下の方にスクロールすると、All in One SEOの設定エリアがあり、以下のようになっています
4.2.5 お問い合わせページ

上記赤枠部分を、仕様通りの「株式会社テストのお問い合わせはこちらです」に変更すればOKです!
お問い合わせページは3つあるのでそれぞれ設定してあげましょう

以上でディスクリプションの設定が完了しました!

続いては、OGPの設定です!

4.3 OGP

All in One SEOの「ソーシャルネットワーク」>「Facebook」に移動してください
OGP

「デフォルトの投稿画像ソース」を、「アイキャッチ画像」に変更し、「デフォルト投稿Facebook画像」を設定します

デフォルト投稿Facebook画像は、「デフォルトの投稿画像ソース」が無い場合に適用されるものになります

設定が以下のようになっていればOKです!(画像は適当です)
OGP

下の方にスクロールすると、「ホームページ設定」という項目があるので忘れずに設定しましょう!
OGP

上記のエリアは、TOPページのOGPを設定するエリアになります
ここを設定していない場合、TOPページのOGPは空欄になってしまうので必ず設定しましょう

以下のように設定できていればOKです!
OGPOGP

Twitterも同様に設定を行いましょう

※以下のキャプチャに映っていない箇所についてはデフォルトのままです

OGP

OGPOGP

以上でOGPの設定が完了しました!

続いては、urlの正規化(canonical)の設定です!

4.4 urlの正規化(canonical)

canonicalタグとは、サイト内で評価される正規URLをGoogleの検索エンジンに認識させるタグのことです。
詳しくは以下を参考にしてみてください
https://service.plan-b.co.jp/blog/seo/4878/

以前のバージョンである、All in One SEO Packのほうでは、canonicalに関してチェックボックスにチェックを入れないと有効化されませんでした

しかし、新しいAll in One SEOではそのようなチェックは必要なくなり、デフォルトで有効になったので特に設定は不要です

試しに、TOPページのソースを確認してみましょう
4.4 urlの正規化(canonical)
上記の赤枠部分にcanonicalタグが出力されていることがわかりますね!

案件によっては、canonicalタグを削除したいケースもあります
そのようなときは、フィルターフックを使って削除しましょう
たとえば、functions.phpに以下のように記述すればOKです

▼以下公式より引用
https://aioseo.com/docs/aioseo_canonical_url/

4.5 アーカイブページ最適化(OGP設定)

アーカイブページでは、OGPが出力されないためPHPファイルに直接記述する必要があります
試しにお知らせ一覧ページのソースを確認してみましょう
4.5 アーカイブページ最適化(OGP設定)
上記の赤枠の通り、OGPが何も出力されていません

そのため手動でPHPファイルに記述する必要があります

※以前のバージョンではアーカイブページでmetaディスクリプションタグも出力されなかったのですが、最新バージョンでは出るようになりました

header.phpを開き、headタグ内に以下をコピペすればOKです

is_singular()は、is_single()、is_page()、is_attachment()のときにtrueとなります

それの否定なのですべてのアーカイブページ(タクソノミーアーカイブなども含む)で出力されることになります

3行目の$og_imageには、OGPを設定した際にアップロードした以下赤枠の画像のパスをコピペします
※あるいは、imgフォルダなどにある画像までのパスを入力してもOKです
4.5 アーカイブページ最適化(OGP設定)

最終的に、以下のようになっていればOKです
4.5 アーカイブページ最適化(OGP設定)

先ほどOGPが出力されていなかった、お知らせ一覧ページのソースをもう一度確認してみると、、
4.5 アーカイブページ最適化(OGP設定)
上記の通り、出力されていますね!

これにて、全てのページのタイトル、ディスクリプション、canonical、OGPの設定が完了しました!
最後に、noindex設定をしてサイトマップを最適化して完成です!
(あと少しなので付いてきてください…!!!笑)

5.設定する(その他)

ここではサイトマップを最適化していきます
サイトマップは、検索エンジンに対してサイトの更新情報を伝え、クローラーの巡回を促すためのものとして重要です

以前は、XML Sitemapという別のプラグインをインストールしないといけませんでしたが、新しいバージョンからはそれが不要になりました

それではいきましょう!

5.1 noindex設定をしてサイトマップを最適化

サイトマップを確認するためには、
All in One SEOの「サイトマップ」「一般的なサイトマップ」から、以下の「サイトマップを開く」をクリックして確認できます
5.1 noindex設定をしてサイトマップを最適化

すると以下のようなページが開きます
5.1 noindex設定をしてサイトマップを最適化
上記のURLをクリックすると、インデックスされているURL確認することができます

この中で最適化を行うべきページは、固定ページのお問い合わせです

上記赤枠の「/page-sitemap.xml」をクリックしてみましょう
すると、以下のように表示されます
5.1 noindex設定をしてサイトマップを最適化
この中で、確認画面「/contact/confirm/」と、完了画面「/contact/finish/」はインデックスされる必要はないので除外してあげましょう

やり方は簡単で、まず、インデックスを除外したい固定ページの編集画面に移動します
次に、AIOSEO設定の「Advanced」をクリックし、「ロボット設定」の「デフォルト設定を使用」がONになっているのでこれをOFFにします
5.1 noindex設定をしてサイトマップを最適化
オフにすると以下の赤枠のエリアが出現するので、「インデックスなし」にチェックをいれ、記事更新ボタンを押しましょう
5.1 noindex設定をしてサイトマップを最適化
設定が終わったら、先ほどのサイトマップページに移動して、「/page-sitemap.xml」をクリックします
すると、、、
5.1 noindex設定をしてサイトマップを最適化
上記のように、先ほどまであった「/contact/confirm/」と、「/contact/finish/」が無くなって、インデックスから除外されていることがわかります

これで、サイトマップの最適化が完了です!

6.まとめ

ここまで大変長い道のりでしたがちゃんと付いて来れましたでしょうか笑
なかなか最新のAll in One SEOでの設定記事がなかったので今回記事にまとめてみようと思いましたがかなりボリュームがありましたね^^;

以前のバージョンとUIが大きくかわったため、慣れるまで大変ですが
是非この記事を通して新しいAll in One SEOに慣れて頂ければと思います!

では!

FOLLOW US