WordPress SEO対策 ・Yoast SEOでできること(2)

わたしが使っているWordPressのSEO対策プラグイン「Yoast SEO」について、「できること」「設定方法」などをご案内します

専門知識が必要なSEO対策が簡単にできる便利なプラグインです

余談「Yoast SEO」を使い始めた理由は、お世話になっていた「オンラインサロンの尊敬する先生」が「プラグイン利用しない派の僕でも、Yoast SEOだけは使っています」とおっしゃっていたからです

ひとつ前に書いた「WordPressのSEOについての記事」のLighthouseの結果です
記事の信憑性のために😅

ひとつ前に書いた「WordPressのSEOについての記事」のLighthouseの結果
目次
  1. はじめに
  2. 設定前にサクッと知っておきたいこと
    1. Googleで検索した時の結果画面
    2. 構造化データとは
    3. metaタグとtitleタグ
    4. OpenGraph コード(OGP)
  3. YoastSEOの初期設定
    1. Yoast SEOプラグインのインストール
    2. インストールウィザードを始める
  4. 画面構成
    1. 一般
      1. 機能について
        1. の使い方)
        2. 機能の項目一覧(オンオフの切り替え)
        3. XMLサイトマップをサーチコンソールに送信
    2. 「検索での見え方」の項目
      1. 一般
      2. コンテントタイプ
      3. メディア
      4. タクソノミー
      5. アーカイブ
      6. パンくずリスト
        1. サイト全体に「パンくずリスト」を表示する場合
        2. 特定のページに「パンくずリスト」を表示する場合
      7. RSS
      8. ソーシャル
        1. 表示の確認
        2. カスタマイズについて
    3. ツール
  5. まとめ

はじめに

「初心者向けWordPressのSEO対策」として書いた下の記事の続きです


上の記事に書き切れなかったことの一覧
該当箇所へのリンクになっています

設定前にサクッと知っておきたいこと

コンピューターに「情報を正しく知らせる」ためには、手間がかかります😅

Googleで検索した時の結果画面

Googleで検索した時の結果画面

ナレッジグラフ(目立ちます)
Googleが構造化データから情報を抽出して表示しています

リッチリザルト(クリックされやすい)
ユーザーの意図をより的確にとらえた情報が表示さるような工夫がされいます

スニペット(ごく一般的な表示)
タイトルディスクリプションだけ

クリックされやすい、ナレッジグラフやリッチリザルトは、構造化データを元に表示されます
*構造化データを追加したら、必ずリッチリザルトが表示されるとはかぎりません

ナレッジパネルは、ナレッジグラフに存在する対象(人、場所、組織、物事など)を検索したときに Google に表示される情報ボックスです。あるトピックに関する概要を簡単に確認できるようにするためのものであり、ウェブ上で利用可能なコンテンツについて Google が把握している内容に基づいています。
ナレッジパネルは自動的に生成されます。表示される情報はウェブ上のさまざまな情報を元にしています。映画や音楽などの特定のトピックに関しては、信頼できるデータを提供するデータ パートナーと協力しており、そのデータを他の公開ウェブソースの情報と組み合わせることもあります。

Googleヘルプ

「必ずクリックされやすくなる!!」なんてことはありませんが、
サイトの情報を、構造化データで伝えるデメリットはありません
では、その構造化データって?

構造化データとは

クローラー(ロボット)は前後の文脈から単語の意味までは理解できません
そこで、単語に〇〇は何かを教えるために、(ボキャブラリー)をつけてあげます
(例 太郎は名前です、太郎はです)
使えるボキャブラリーやルールは決まっています(schema.orgと言います)
伝え方は3通りの文法がありますが(JSON-LDという文法が推奨されています)

構造化データの例

こんなデータを作って、HTMLファイルに追加します
「Yoast SEO」が、データを作りHTMLに追加してくれます

「このサイトは個人が運営しているウェブサイトです」と会社ではないことを伝えています

JSON-LD
追加された構造化データ

metaタグとtitleタグ

HTMLのタグにはたくさんの属性と値の組み合わせがあり、その中に「metaタグ」や「titleタグ」もあります

metaタグの中で、とりあえずこんなものがあるんだ程度知っておきたいのは、いわゆる

  • ノーインデックス
  • メタディスクリプション
  • 後で説明する「OpenGraph(OGP)」です

1、ノーインデックス(noindex)はインデックスされないためにつけます(検索されたくない場合です)
2、メタディスクリプションは検索結果に表示される文章を自分で決めて書きます(メタディスクリプションがない場合は、Googleが勝手に決めます)

1  <meta name="robots" content="noindex">
2  <meta name="description" content="〇〇のサイトです ・・・">

titleタグです
検索結果に表示されるタイトル部分!!最重要です

<title>WordPressSEO対策 ・Yoast SEOでできること</title>

OpenGraph コード(OGP)

サイト運営に、SNSを利用する場合が多いと思います
SNS用の設定です

SNSでシェアしてもらっても、「画像がないURLだけの表示」だとさびしいです
自分でSNSに投稿する時も、わざわざ画像を用意して投稿するのは面倒です!

「OGP」はSNSでシェアした際の、サイトのタイトルやイメージ画像、説明などを設定するもので、metaタグの中に書きます*Twitterは「Twitterカード」と呼びます

「Yoast SEO」で、Twitter・Facebookの「OGP」を設定します

OpenGraph コード
追加されたOGP

余談ホームページの画面上で、右クリック「ページのソースを表示」をクリックすると、HTMLファイルの中身が表示されます
<head>から</head>の間にあります(上の方です)

YoastSEOの初期設定

インストールウィザードを開始して、必要な設定をします
追加・変更は個々に管理画面で設定します

Yoast SEOの設定のほとんどは「一度設定したらあとは気にしなくてOK」です
設定した機能の多くは、記事を投稿する時に有効になり、投稿画面で活用します

Yoast SEOプラグインのインストール

  1. wordpress管理画面プラグインインストール新規追加をクリック

    プラグインをクリック
    次に新規追加をクリックします

  2. Yoast SEOと入力

    右上キーワードに「Yoast SEO」と入力
    「今すぐインストール」をクリック

  3. 設定をクリック

    インストール完了後
    設定をクリック

    有料版(プレミアム版)もありますが、無料版で十分です

  4. 設定ウィザードをクリック

    設定ウィザードをクリックします

インストールウィザードを始める

  1. インデックスされる準備ができているにチェック

    「インデックスされる準備ができている」にチェック

  2. サイトのタイプを選択

    サイトのタイプを選択
    構造化データ情報です

  3. YoastSEOインストールウィザードの画面

    個人ブログの場合は人を選択

    構造化データ情報です
    登録した情報はナレッジグラフで利用される可能性があります

  4. 投稿と固定の両方はいを選択

    「投稿」と「固定」の両方「はい」を選択しておきます

    検索エンジンににインデックスを許可するかの設定です

  5. いいえを選択

    複数の作成者名で投稿する場合以外は必ず「いいえ」にします

    「作成者のアーカイブ記事一覧」と「投稿記事一覧」は同じで「重複コンテンツ」になるからです

  6. 区切り文字を選ぶ

    「区切り文字」を選びます

  7. インストールウィザードの画面

    改善協力
    任意です

  8. インストールウィザードの画面

    ニュースレターの登録
    任意です

これで最低限の機能は有効になりました
個別の機能については、画面構成をみながら進めます

画面構成

大項目

  • 一般
  • 検索での見え方
  • ソーシャル
  • ツール

一般

「一般」をクリックしたときの画面

一般設定画面

ダッシュボード

1、初回SEO設定
インストールウィザードをはじまる時に使います

2、問題点
SEO上の問題点があるときに通知されます

3、通知
問題解決方法の案内

一般設定画面ー機能

機能

機能を有効にするか?:ONとOFFを切りかえるところです

機能の詳細はのちほど

連携画面

連携

使用しません

他社のSEO分析ツールなどと連携するときに使います

ウェブマスターツール画面

ウェブマスターツール

サーチコンソール(Google Search Console)設定ずみの場合は無視して下さい

*header.phpファイルの<head ></head>に貼り付けるメタタグ追加がここでできます(赤枠内に貼り付ける)

サーチコンソール(Google Search Console)はこちらを参考に

機能について

機能の多くは、記事を投稿する時に利用します
先に、投稿画面での使い方から

投稿画面(YoastSEOメタボックスの使い方)

Yoast SEOメタボックスは投稿画面の下部と右側にあります

メタボックス

SEO
*下側メタボックスの画面です

フォーカスキーワード無視(日本語に関しての信頼性が低い)

Yoast SEOメタボックス

この記事の検索結果に表示されるタイトルと、説明(メタディスクリプション)を設定する

1、SEOタイトル:タイトル

3、メタディスクリプション:記事の説明文

2、スラッグは右側URLスラッグでも入力できるが、どちらかで必ず入力する

Yoast SEOメタボックス

コーナーストーンコンテンツ

重要記事に目印をつける機能
オンにすると記事一覧で絞り込みができる

なぜ重要記事に目印が必要かは「コンテンツSEO」などで検索してみて下さい

YoastSEOメタボックス

高度な設定

1、記事をインデックスさせたくない場合は「いいえ」にします
プライバシーポリシーや問い合わせページのインデックスが不要な場合など

2 canonical(カノニカル)を追加する場合はカノニカルURLに正規ページのURLを追加します

重複コンテンツやcanonical(カノニカル)に関してはこちらの記事を参考に

YoastSEOメタボックス

スキーマ

この記事に関する構造化データを変更する場合に使います
何もしなければ、デフォルト設定(あらかじめ設定されている標準の設定)になります

メタボックス

ソーシャル

この記事だけ、SNSでの見え方を変更する場合に使います
何もしなければ、デフォルト設定(アイキャッチ画像が自動で入ります)になります

OGP設定の続きはこちらのリンク先も確認して下さい

メタボックスのソーシャル

(注意)あくまで、SNSでの見え方を特定の記事で変更する場合の参考です

文字数に関して
「サイト名」や「カテゴリー名」「ニックネーム」など入れたい場合
「description」を空欄にすると、タイトルと説明だけで文字数を超過するので、工夫が必要です

変数はこちら(YoastSEOのヘルプ)で確認できます

機能の項目一覧(オンオフの切り替え)

「邪魔ならばオフにできます」程度のことです

SEO解析
サイトのSEO対策を分析して、改善点を提案する機能
投稿画面(YoastSEOメタボックス)で使わない場合はOFFにする
可読性解析
文章の構成を分析して、改善点を提案する機能
投稿画面(YoastSEOメタボックス)で使わない場合はOFFにする
コーナーストーンコンテンツ
重要な記事に印をつける機能
テキストリンクカウンター
「投稿一覧」の右上部にその記事の内部リンク数を表示する機能(自分のサイトの他の記事にリンクすることは推奨されています)
投稿一覧の画面
有効にしたときの投稿一覧の画面(右上)
XMLサイトマップ
XMLサイトマップを作成する機能
管理バーメニュー
管理バーメニュー(管理画面の一番上・黒いところ^^;)にYoastからの通知を知らせるアイコンを追加する機能
セキュリティ
複数で投稿する場合に権限のある人だけが編集や削除ができるようにする機能です
とりあえずONにします
使用状況のトラッキング
Yoastの改善に協力し、データ共有を許可する場合は有効にします
REST API:Headエンドポイント
APIを利用するときの機能なので通常使用することはありません(開発者向けの機能)
Slack共有強化
Slack(チャットツール、エンジニア関係の方がよく使う印象)で投稿がシェアされた時の機能です
こちらも通常使うことはありません
XMLサイトマップをサーチコンソールに送信

注意サイトマップを送信する時は、次に案内する「検索での見え方」の設定を完了してから送信して下さい
「検索での見え方」の設定と生成されるサイトマップの情報は連動している箇所があります

規模の小さいサイトの場合、個々のページがインデックスされていれば、XMLサイトマップは必ず送信する必要はありませんが、送信することでインデックスが早くなる可能性があり、XMLサイトマップを送信することのデメリットはありません

  1. ?マークをクリック

    「一般」の「機能」から

    XMLサイトマップの機能を「オン」
    「?」マークをクリックします

  2. XMLサイトマップ表示をクリック

    「XMLサイトマップ表示」をクリックします

  3. URLをコピー

    上の画面が表示されるので「URL」をコピーします

  4. サーチコンソールの画面サイトマップを選択

    サーチコンソールの画面

    「サイトマップ」を選択します

  5. 送信をクリック

    コピーしたURLを貼り付けて「送信」をクリックします

「検索での見え方」の項目

タブが7つあります
「一般」「コンテンツタイプ」「メディア」「タクソノミー」「アーカイブ」「パンくずリスト」「RSS」

YoastSEO検索での見え方設定画面

「一般」と「コンテンツタイプ」は既にインストールウィザードで設定した項目も含まれています

一般

YoastSEO検索での見え方設定画面

一般(その1)

タイトル区切り
インストールウィザードで設定済みの区切り文字です

ホームページ
トップページのタイトルとメタディスクリプションを入力します

*タイトルは「Insert variable」から挿入します

Insert variable

「Insert variable」から変数を使う理由は
タイトルを変更したときに、変数を使うと変更内容が自動で反映されるからです

だから
(注意)メタディスクリプションにタイトルを使う場合「Insert variable」から挿入しましょう

見え方設定画面

一般 (その2)

トップページがシェアされた時のSNSでの見え方(OGP設定)です

OGP設定の続きはこちらのリンク先も確認して下さい

YoastSEO検索での見え方設定画面Schema.org

一般 (その3)

ナレッジグラフとSchema.org

インストールウィザードで設定済みのサイト情報(構造化データ)です

コンテントタイプ

投稿ページ固定ページに関する設定です

  • 投稿ページと固定ページをインデックス登録を許可するかの設定(インストールウィザードで設定済み)
  • 独自に投稿ページと固定ページのSNS(OGP)と構造化データ(schema.org)を設定する場合だけ、ここで設定します
YoastSEO検索での見え方設定画面コンテントタイプ

固定ページの「コンタクトページ」や「プライバシーポリシー」を内容の薄いコンテンツとして除外する場合は、固定ページのインデックスは「オン」にして、「プライバシーポリシー」などを単独でインデックス除外できます
投稿画面(YoastSEOメタボックス)の高度な設定

メディア

WordPress へ画像や動画をアップロードすると、画像や動画の保存場所へのURL が生成されます
生成されたURLにはほとんど情報がなく、クロールの必要がないのでページ自体にリダイレクトする設定を有効にします(初期設定で有効になっています)

検索での見え方設定画面メディア


 *もし画像がメインのサイトで画像に丁寧な説明文を書いている場合は、運用が違ってくるのかもしれません

タクソノミー

*タクソノミーは分類のことです(カテゴリーごとやタグごとの分類など)

検索での見え方設定画面タクソノミー

「カテゴリー」
「タグ」
「フォーマット」
それぞれにインデックスを許可するか、タイトルとメタディスクリプションを設定します

「カテゴリーURL」
カテゴリー一覧のURL には /category/が含まれます
/category/を削除したい場合は「削除」を選択

YoastSEO検索での見え方設定画面タクソノミー

カテゴリーとタグ

インデックス登録から除外する場合は「検索結果に表示しますか?」を「オフ」にします

除外するという意見が多い印象

投稿画面postformat

フォーマット

「投稿フォーマット」に対応しているテーマのみが対象です
少ないと思いますのでほぼ無視して大丈夫です

対応しているテーマの場合
投稿画面に、上の写真のように「投稿フォーマット」が表示されます
その場合はインデックス可否を決めましょう

このサイトのワードプレスの記事一覧ページ

カテゴリー一覧を除外するかは悩むところです

カテゴリー一覧を除外するか?悩むところですが、
あくまで余談として

以前読んだ記事に、カテゴリーの項目(term)に絞った記事の一覧全部がサイトの中で価値のあるページか?
またディスクリプション(説明文)を書く価値があるか?で判断すると書かれていました
わたしは除外していますが、理由はカテゴリーを頻繁に変更するからです^^;
「オフ」にした時は「noindex」インデックスは禁止ですが、合わせて「follow」クロールして情報収集はOKになっています

<meta name='robots' content='noindex, follow' />

アーカイブ

YoastSEO検索での見え方設定画面アーカイブ

投稿者アーカイブ・日付アーカイブ

それぞれインデックス可否を決めましょう

くどいようですが、投稿者アーカイブは投稿者が自分だけの場合は「オフ」です

検索での見え方設定画面

特別ページ

検索結果と404ページのカスタマイズ
実は、試したけど反映しなかった💦
直接SEOとも関係ないので、見送ります

パンくずリスト

パンくずリスト

「パンくずリスト」とはユーザーがみているページが、サイト全体の「どこにあるか?」をしらせる、ナビゲーションです

既にテーマが対応していたり、パンくずリストを追加するためのプラグインもありますが、「Yoast SEO」にもその機能があります

サイト全体に「パンくずリスト」を表示する場合

「Yoast SEO」でパンくずリストを表示する場合の注意点

テーマによりコードを追加する適切な場所が異なります
レイアウトされていないので、CSSのカスタマイズが必要になると思います
テーマの更新により、上書きされて消える可能性があるなど不確定要素がかなりあります
*上書き回避は「子テーマ」を使うことですが、横道にそれ過ぎるので😅 見送ります(通常消えた場合、再度コードを追加すれば表示されるはずです)

設定方法

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs" style="text-align: center;">','</p>' );
}
?>
  1. 検索での見え方パンくずリストの画面

    パンくずリストをクリック

    「テーマのパンくずリストを有効にする」で有効を選択

    変更を保存をクリック

  2. 外観からテーマエディターを選択

    「外観」から「テーマエディター」を選択します

  3. テーマヘッダーを選択

    右側の「テーマヘッダー」を選択します

  4. ファイルを更新をクリック

    上のコードをコピーして
    一番下に貼り付けます

    「ファイルを更新」をクリックします

    *編集はくれくれも注意して操作して下さい

特定のページに「パンくずリスト」を表示する場合

簡単です

「テーマのパンくずリストを有効にする」で有効にした状態で
投稿画面の表示させたい場所で「Yoastパンくずリスト」ブロックを選択するだけです

投稿ページフロック一覧

RSS

RSSアイコン

上のマークは RSSでサイトの更新情報が提供されているという印です
ちなみに配信された情報を見るには「RSSリーダー」が必要です

サイト運営者側
「RSS」は「XML」という「HTML」の親戚のような言語で書き、書いたデータ(RSSフィード)を配信します
購読者側
「RSSリーダー」を準備して、興味のあるサイ(RSSフィードのURL)を登録します
登録したサイトに更新があれば受け取る仕組みです

WordPressのテーマやプラグインがRSSフィードを配信している場合が多く、上のマークがなくてもRSSフィードを配信しているサイトはたくさんあります

「Yoast SEO」はWordPressから自動生成されるRSSフィードに、署名(サイト名)と配信元リンクをいれることができ、記事の盗作防止に役立ちます

検索での見え方RSSの画面

「検索での見え方」RSSで
署名(サイト名)と配信元リンクの挿入は初期設定されています
投稿 %%POSTLINK%% は %%BLOGLINK%% に最初に表示されました。

管理画面設定表示設定

また
WordPress全体「設定」の「表示設定」で

「フィードで表示する投稿数」と「全文か抜粋」の変更ができます

余談WordPressの場合、ほぼサイトURL末尾に「/feed 」と入力して検索すると、配信しているRSSフィードが確認できます

ソーシャル

OpenGraphコード(OGP)の設定です

YoastSEOソーシャルの画面

ソーシャルをクリックした画面
(一画面に編集しています)

「Facebook」と「Twitter」両方とも有効にしておきましょう
*ちなみに「Pinterest」は自動でメタタグを出力してくれないので無理です(無料ビジネスアカウントも必要です)


ユーザー情報を入力しておきましょう

ユーザー一覧画面

「ユーザー」「ユーザー一覧」から「編集」をクリックします

ユーザー一覧編集画面

「Facebook」は、アカウントのURLを入力
入力しなくても「Yoast SEO」に関してはOKです

「Twitter」は @を除いた「Twitterユーザー名」を入力します

特定の投稿だけ、個別にSNSでの表示をカスタマイズしたい場合は戻って確認して下さい

表示の確認

「FacebookやTwitter上でどんな感じで表示されるか」をWordPressの投稿画面から確認する機能は、「Yoastプレミアム」(有料)です

でも、下のサイトでそれぞれ確認できます😊(SNSアカウントにログインは必要)

送信してうまくいかない場合は、もう1度送信してみて下さい
FacebookでOGP設置には、fb:app_idが必須ですと表示されると思いますが、2021年10月現在なくても表示されるので大丈夫です
fb:app_id取得はちょっと面倒で、取得してもYoast側でまだfb:app_id情報の設置に対応していないようです

余談記事のタイトルなどを変更し、再度SNSに投稿した際に変更が反映されないことがあります
その場合にも、こちらのツールで送信してから、再度投稿すると変更されます(キャッシュがクリアされるからです)

カスタマイズについて
twitterカードを表示した画面

Twitterの場合は

上の「小さな画像のレイアウト」
下の「大きな画像のレイアウト」
を選べます

*Facebookは大きな画像のみ

ソーシャルのTwitterから使用するデフォルトカードタイプ

「ソーシャル」の「Twitter」から
「使用するデフォルトカードタイプ」を選択します

「小さな画像のレイアウト」は「概要」

「大きな画像のレイアウト」は「大きな画像つきの概要」

を選択します

ツール

Yoast SEOツールの画面
「ツール」をクリックした画面

「ファイルエディタ」をクリックすると「robots.txt」と「.htaccess」の編集ができます
*サーバーにより、できない場合もあり、こちらを使っての編集はあまりおすすめできません

まとめ

面倒な作業ですが一度設定したら、あとは投稿するときに「メタディスクリプションを書く(できれば)」「URLスラッグ(パーマリンク)を英単語で書く(必ず)」が基本です

正直なところ、わたしはメタディスクリプションも書いていないというお粗末さですが、これを機会にもう少し丁寧になろうと思いました😅

構造化データなるものに対応してどれほどのものか?ですが、デメリットになることはなく、面倒な作業でもないのでぜひ試してみて下さい😊