#15 Drupal9 SEO関連モジュールの追加と検索エンジン（Google/Bing）への登録

ponkotsu 9 June 2021

前回はDrupal9のコンテンツエディタであるCKEditorの拡張を進めました

今回はDrupal9にSEO関連モジュールの導入をしました
検索エンジン(Google,Bing)へのサイトマップ登録や、SNSでシェアを効果的にするメタタグの利用
確認ツール(Google Search Console, Bing Webmaster Tools, Facebook Share Debugger, Twitter Card Validator）の使い方を紹介していきます

今回の構成

コンポーネント	利用しているもの
OS	Ubuntu 20.04LTS
CMS	Drupal9 with Composer
Webサーバ	NGINX
テーマ	vani
モジュール	AddToAny Share Buttons, Admin Toolbar, Colorbox, Insert, Redirect, Pathauto, Token, Chaos Tool Suite (ctools)
CKEditor拡張モジュール	CKEditor Anchor Link, CKEditor custom config, CKEditor CodeSnippet, CKEditor Color Button, CKEditor FakeObjects, CKEditor Panel Button, CKEditor Font Size and Family
SEO関連モジュール	Google AdSense integration, Google TagManager, Metatag, Scheme.org Metatag, Simple XML sitemap
Googleツール	アナリティクス（Analytics）, タグマネージャ（TAG Manager）, アドセンス（Adsense）, サーチコンソール（Search Console）
Microsoftツール	ウェブマスターツール（Webmaster Tool）, クラリティ（Clarity）
Facebookツール	Facebookシェアデバッガー（Facebook Share Debugger）
Twitterツール	Twitter Card Validator

本日のメニュー

ページが長くなりましたのでメニューを作成しました

検索エンジンやSNSを活用したアクセス増加
Drupalでのサイトマップ・メタタグの実装
1. Simple XML Sitemap
  1. Google Search Console
  2. Microsoft Bing - Webmaster Tools
2. メタタグモジュールの導入
  1. Metatagモジュール
  2. Schema.org Metatagモジュール

検索エンジンやSNSを活用したアクセス増加

せっかくDrupal9を作ってサイトを作ったら、アクセス数を増やしたいですよね

アクセス数を増やすにはコンテンツを充実させていくことが最も重要ではありますが、せっかく増やしたコンテンツを見てもらうには検索エンジンやSNSを使って認知してもらう必要があります

検索エンジンとは

検索エンジンやブラウザのマーケットシェアを提供しているstatcounterの2021年6月時点データでは検索エンジンのシェアは以下の通りです

	全世界	日本
Google	92.18% (1)	75.49% (1)
bing	2.27% (2)	3.14% (3)
Yahoo!	1.5% (3)	21.01% (2)
Baidu	1.46% (4)	0.1% (5)
YANDEX	0.69% (5)	0.03% (6)
DuckDuckGo	0.59% (6)	0.16% (4)

全世界でも日本でも検索エンジンのマーケットシェアはGoogleが圧倒的1位です。

日本はYahoo!が約20%と比較的シェアが大きいのも特徴です。Microsoftのbingが全世界では2位ですが、日本では3位で、シェアは2-3%程度です。

Yahoo! Japanは検索エンジンのベースにGoogleを使っていますので、結論から言うと日本語コンテンツにおける検索エンジン対策はGoogle対応を行えば問題ありません。

それではGoogleの検索エンジンの仕組みの概要を見ていきます

Google 検索エンジンの仕組み

Googleによる検索の仕組みを参考にしながら簡単にまとめました

検索インデックスとクローラー

クロールとは

ウェブクローラと呼ばれるプログラムが公開されたウェブページを探し、ユーザがコンテンツを閲覧するときと同じようにウェブページを見てリンクをたどります。

リンクからリンクをたどりウェブページに関する情報を蓄積します。

クロールは、過去のクロールから得られたウェブアドレスと、ウェブサイトの所有者から提供されたサイトマップで構成するリストから始まります。

クローラはこれらのウェブサイトにアクセスし、そのサイト上のリンクを使って他のページを探します。特に、新しいサイトの情報、既存のサイトの変更点、無効なリンクについて重点的に確認します。

クロールするサイト、クロールの頻度、各サイトから取得するページ数はGoogleのプログラムによって決定されます。Googleでは有償でのクロール頻度増加などは行っていません。

検索インデックス

クローラが特定のウェブページを見つけると、Google のシステムがブラウザと同様にページのコンテンツを表示します。Google ではキーワードやウェブサイトの新しさといった主要なシグナルに注目し、検索インデックスにそのすべての情報を記録しています。

Google のインデックスには、本の巻末にある索引と同じように、各ウェブページに含まれているすべての語が 1 つずつ追加されています。つまり、インデックスにウェブページが登録されると、そのページに含まれるすべての語がインデックスに追加されるということです。

検索アルゴリズム

検索ユーザが検索する際に、探している情報を見つけやすい形でユーザーに表示するために、Googleではランキングシステムが採用されています。

検索インデックスに登録されている膨大な数のウェブページを分類し、最も関連性の高い有用な結果を瞬時に検索して、探している情報を見つけやすい形でユーザーに表示します。

ランキングシステムのロジックなどは公表されておらず、複数のアルゴリズムを組み合わせ構成されています。

最も有用な情報を表示するため、検索アルゴリズムはさまざまな要因（検索クエリの単語、ページの関連性や有用性、ソースの専門性、ユーザーの位置情報や設定など）を検討します。各要因に適用される重み付けはクエリの性質によって異なります。

検索結果を決める主な要因として公表されているのは、「検索糸の把握」「ウェブページの関連性」「コンテンツの品質」「ユーザビリティ」「文脈の考慮」となります。

詳細はGoogleにて検索アルゴリズムの仕組みという紹介が用意されています。

サイトマップ

クロールの説明でもありましたが、ウェブページ所有者は自身のサイト情報をサイトマップとして検索エンジンに提供が可能です。

サイトマップとは、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。

サイトの各ページが適切にリンクされていれば、Google など検索エンジン、サイトのほとんどのページを検出できます。適切にリンクされているというのは、なんらかのナビゲーション（ページに配置したサイトのメニューやリンクなど）によって重要なすべてのページに移動できる状態を指します。サイトの各ページが適切にリンクされている場合でも、大規模なサイト、複雑なサイト、専門性の高いファイルのクロールを改善する手段としてサイトマップが役立ちます。

Drupalではサイトマップを自動的に作成してくれるモジュールが用意されていますので後ほど導入を行います。

メタタグ

ページ単位のメタタグは、ウェブサイトの所有者にとって自サイトに関する情報を検索エンジンやSNSに伝えるための手段になります。

メタタグを使用して、様々な種類のクライアントに情報を提供できます。例えば、ページの説明やコンテンツタイプなどの情報、クロールやインデックスを作成する検索エンジンへの動作制御などの提供が可能です。

Open Graph Protocol (OGP)

Open Graph Protocol（OGP）とは、メタタグを利用してWebサイトのコンテンツの内容をSNSで伝える際に使用する仕組みです。

OPGは元々facebookが作成したものですが、facebookだけでなくTwitterやLINE、はてなブックマークなどでも活用されています。

例えば、SNSでWebの記事をシェアしたときに、その記事のURLとタイトル、簡単な内容やサムネイル画像がボックスにまとめられて表示されるのを見たことがあると思います。

OGPはこのボックス内のタイトルは何を表示するか、URLは何か、画像は何か、などを提供するための情報提供方法を定義しています。

Drupalでのサイトマップ・メタタグの実装

それでは、Drupal9でサイトマップやメタタグを提要するためのセットアップを進めていきます。

Simple XML Sitemap

Drupal9で利用できるサイトマップ作成モジュールはいくつかありますが、今回はSimple XML Sitemapを利用します。

https://www.drupal.org/project/simple_sitemap

Simple XML Sitemapインストール

インストールは通常のモジュールと同様です。

2021/6/14時点の最新版は8.x-3.10です。

Ubuntu20でComposerを利用している場合は下記のようなコマンドでインストールします

(www-data)% cd /var/www/drupal
(www-data)% composer require 'drupal/simple_sitemap:^3.10'

インストール後、Drupal9の管理画面で[管理] - [拡張機能]からSimple XML Sitemapを有効化します

サイトインデックスを作成するだけであれば、Simple XML Sitemapだけを有効にします。

作成したサイトマップをサーチエンジン（GoogleとBingは事前設定済）に登録したい場合は、Simple XML Sitemap (Search engines)を有効にします。

Viewsで作成したモジュールもインデックス化しサイトマップに含めたい場合はSimple XML Sitemap (Views)を有効にします。

Simple XML Sitemap設定

Drupal9への組込みが終わりましたら設定を行います。

設定は、[管理] - [環境設定] - [検索とメタデータ] - [Simple XML Sitemap]から管理画面に移動します。

Drupal9上で多言語向けサイトを構築している場合は、hreflang設定を追加しますが、単一言語（日本語だけなど）であればDefaultで良いと思います。

[設定]タブをクリックすると下記のような詳細設定画面に移動します

主要な設定項目

サイトマップの更新間隔（Sitemap Generation Interval）

サイトマップの更新頻度を設定します。標準設定はOn every cron run（cron実施毎）ですが、選択肢にある時間や日単位での指定も可能です。

デフォルトのベースURL

サイトマップのベースとなるURLを記載します

通常はサイトマップ作成対象となるサイトのトップURLを記載します

重複リンクを除外

通常は重複リンクは除外すべきです

巨大なサイトを運営していて、PHPエラーが出る場合にはチェックを外すと改善する可能性があります

Inclusion設定

上部の[Inclusion]タブをクリックします。

Sitemapにどの要素を含むかの設定をおこないます。

「コメント」「コンテンツ(CONTENT)」「カスタムブロック」「カスタムメニューリンク」「メディア(MEDIA)」「リダイレクト」「ショートカットリンク」「TAXONOMY TERM」「USER」それぞれを対象にするか設定します。

Simple XML Sitemap Inclusion Configuration

設定を更新した後は、「Regenerate all sitemaps after hitting Save」にチェックを入れて、サイトマップの再作成をお勧めします。

検索エンジンへの自動登録

Simple XML Sitemap (Search engines)を有効すると、検索エンジンへの自動登録が可能となります。

Simple XML Sitemapの設定画面上部に「検索エンジン」タブができますので、クリックをすると登録状況が見えます。

登録先を設定するには、赤枠で囲った「Submission settings can be configured here.」のhereをクリックします。

Simple XML Sitemap search engine configuration

ここで、対象とするサーチエンジン（Google/bing）とVariants（言語）、アップデートする間隔(submission interval)を設定します。

これで、サイトマップの設定は完了です。

サーチエンジン登録状況の確認

Google Search Console

https://search.google.com/search-console/about?hl=ja

Google ではサーチエンジンでの登録状況などを確認するために、Google Search Consoleというツールが提供されています

サイトにアクセスし、自身のGoogle IDでログインを行います

ログイン後、確認対象とするサイトのプロパティを作成します

ドメイン単位での対応であればドメインを、そうでない場合はURLプレフィックスを登録します。

ドメイン単位での利用には、ドメインの所有確認が求められるため実施します。

こちらはGoogleのSearch Consoleヘルプに日本語で記載がありますので必要に応じてご確認ください。

プロパティができましたら、下記のようなコンソールが出ると思います

サイトマップの登録状況は、左側のナビゲーションより「サイトマップ」で登録状況の確認が可能です。

送信されたサイトマップに自サイトのサイトマップが記載されていれば、Simple XML Sitemapモジュールによるアップデートが成功したことが確認できます。

この他にも、検索パフォーマンス（検索ヒット数やクリック数、平均掲載順位など）などが確認できますので、サイト運営の参考にしていただければと思います。

Microsoft Bing - Webmaster Tools

https://www.bing.com/webmasters/about

Microsoft Bingではサーチエンジンでの登録状況などを確認するために、Microsoft Bing - Webmaster Toolsというツールが提供されています

本サイトは、Microsoftの他、GoogleやFacebookのIDでも登録が可能です。

ログインできましたら、Webmaster Toolsで対象のサイトを追加します。

Bing Webmaster Toolsは、手動でのサイト追加の他に、Google Search Consoleからのインポートも可能です。

Google Search Consoleの設定が完了しているのであれば、Google Search Consoleからのインポートするのが簡単かと思います。

プロパティができましたら、下記のようなコンソールが出ると思います

サイトマップの登録状況は、左側のナビゲーションより「サイトマップ」で登録状況の確認が可能です。

メタタグモジュールの導入

Drupalではメタタグを利用するためのモジュールがいくつかありますが、

今回はMetatagモジュールと、Schema.org Metatagモジュールを導入します。

Metatagモジュール

Drupal9でメタタグを利用するためには、まず本モジュールを導入します。

https://www.drupal.org/project/metatag

Metatagモジュールのインストール

インストールは通常のモジュールと同様です。

2021/6/14時点の最新版は8.x-1.16です。

Ubuntu20でComposerを利用している場合は下記のようなコマンドでインストールします

(www-data)% cd /var/www/drupal
(www-data)% composer require 'drupal/metatag:^1.16'

インストール後、Drupal9の管理画面で[管理] - [拡張機能]からMetatagを有効化します

Metatagモジュールをインストールすると、各種サブモジュールもインストールされます。

Metatag Extended Permissions
Metatag: App Links
Metatag: Dublin Core
Metatag: Dublin Core Advanced
Metatag: Facebook
Metatag: Favicons
Metatag: Google Custom Search Engine (CSE)
Metatag: Google Plus
Metatag: Hreflang
Metatag: Mobile & UI Adjustments
Metatag: Open Graph
Metatag: Open Graph Products
Metatag: Page Manager
Metatag: Pinterest
Metatag: Twitter Cards
Metatag: Verification
Metatag: Views

必要に応じて、必要なモジュールも有効化します。

各種SNSを使ってサイト集客を図るには、Open Graph Protocol(OGP)を利用するために、Metatag: Open Graphモジュールを有効にすることをお勧めします。

また、各種SNS用の個別情報を提供する場合は個別モジュールも有効にしてください。

Twitter用にTwitter Cards情報を提供するためにはMetatag: Twitter Cardsモジュールを、

FacebookでFacebook Application IDを取得している場合は、Metatag: Facebookモジュールを有効にします。

Schema.org Metatagモジュール

Metatagモジュールのみで、OGPやTwitter CardsやFacebookに関するメタタグの追加は可能ですが、

自サイトや、自サイトで紹介しているビジネスなどの内容を伝えるためには不十分となります

Google、Microsoft、YahooやYandexが出資するSchema.orgの定める構造化データ（ボキャブラリー）を利用して、

自サイトに関する情報をGoogleなど検索エンジンが理解しやすくしていきます

詳しく知りたい方は、Googleが提供する構造化データに関する仕組みも参照してみてください

Schema.org Metatagモジュールのインストール

インストールは通常のモジュールと同様です。

2021/6/14時点の最新版は8.x-2.2です。

Ubuntu20でComposerを利用している場合は下記のようなコマンドでインストールします

(www-data)% cd /var/www/drupal
(www-data)% composer require 'drupal/schema_metatag:^2.2'

インストール後、Drupal9の管理画面で[管理] - [拡張機能]からSchema.org Metatagを有効化します

Schema.org Metatagモジュールをインストールすると、各種サブモジュールもインストールされます。

Schema.org Article
Schema.org Book
Schema.org Course
Schema.org Event
Schema.org HowTo
Schema.org Image Object
Schema.org ItemList
Schema.org JobPosting
Schema.org Metatag Example
Schema.org Movie,Series,Season,Episode
Schema.org Organization
Schema.org Person
Schema.org Place
Schema.org Product
Schema.org QAPage and FAQPage
Schema.org Recipe
Schema.org Review
Schema.org Service
Schema.org SpecialAnnouncement
Schema.org Video Object
Schema.org WebPage
Schema.org WebSite

例えば、サイトで商品を紹介する場合はSchema.org Productなど、サイトのコンテンツに合わせたサブモジュールを追加します

メタタグの設定

メタタグの設定はDrupal9の管理画面から[管理] - [環境設定] - [検索とメタデータ] - [メタタグ]から設定を行います

[Metatag デフォルト]タブでは、各タイプごとのデフォルトのメタタグの定義が可能です。

タイプは導入直後は以下になっています。

GLOBALで定義したパラメータはサイト全体の標準設定となり、個別タイプで設定された項目のみ上書きされます

TYPE	概要
GLOBAL	サイト全体のメタタグ設定
FRONT PAGE	フロントページへのメタタグ設定
403 アクセス拒否	「403 アクセス拒否ページ」へのメタタグ設定
404 ページが見つかりません	「404 ページが見つかりません」ページへのメタタグ設定
CONTENT	コンテンツページへのメタタグ設定
TAXONOMY TERM	TAXONOMY TERMページへのメタタグ設定
USER	ユーザページへのメタタグ設定

また、タイプは追加が可能です。下記のようなタイプに対しても定義追加が可能です

TYPE
Media（Default, Audio, Document, Image, Remote video, Video）	全メディア、またはメディアタイプごとのメタタグ定義
Content（各コンテンツタイプ）	追加された各コンテンツタイプごとのメタタグ定義
URLエイリアス	URLエイリアスへのメタタグ定義
リダイレクト	リダイレクトへのメタタグ定義
Taxonomy Term（各ボキャブラリ）	個別ボキャブラリへのメタタグ定義
User	ユーザへのメタタグ定義

各タイプへのメタタグ設定

定義を行いたいタイプの右側にある[Edit]をクリックします

対象となるタイプの設定画面に移動します

導入したサブモジュールの項目含めて、設定できる項目グループが表示されますので、展開して定義を行っていきます

各項目は各サイトに応じて記載いただければ思いますが、一部抜粋して紹介していきます

メタタグ項目紹介

全ての説明はできませんが、一部を抜粋して紹介します

設定画面上に各タグの説明が記載がありますので、参照してください

基本のタグ

基本のタグを展開すると「Page Title (title)」「説明 (description)」「要約 (abstract)」「キーワード (keywords)」が展開されます

※かっこ内はメタタグのラベルです

各項目にはトークン（例：[current-page:titie] | [site:name]）が利用できますので、ページごとの固有項目などはトークンを利用できます

最低限、「Page Title (title)」「説明 (description)」は定義することをお勧めします

「Page Title (title)」は検索エンジンの検索結果に表示されるページタイトル、「説明 (description)」は検索エンジンの検索結果の説明に参照されます。

Googleでの検索結果だとこのような感じで表示されます

Open Graph Protocol(OGP)対応

繰り返しになりますが、OGPとはFacebookやTwitterなどでサイトをシェアする際に、ページのタイトル・URL・概要・アイキャッチ画像を意図した通りに表示させる仕組みです。

OGP対応には、Metatag: Open Graphモジュールを有効にする必要があります。

有効にすると、タググループにOPEN GRAPHが追加されます。

ちなみに、OPEN GRAPHのタグ名はog_という接頭語が付与されます。

多くのタグがありますが、基本的なタグと、Megatagモジュールでの項目名を記載します。

metatag	Drupal項目	概要
og_title	OPEN GRAPH - タイトル	ページのタイトルを指定
og_type	OPEN GRAPH - コンテンツタイプ	コンテンツタイプを指定様々指定できるが詳細は下記参照（英語） https://ogp.me/#types よく使われるog_type website:ウェブサイトのトップページに指定 article: ウェブページのトップページ以外に指定
og_url	OPEN GRAPH - ページURL	ページのURLを指定 URLしては絶対パスで行う必要がある
og_image	OPEN GRAPH - Image	画像を指定 SNSでは画像画像は絶対パスで行う必要がある
og_image_type	OPEN GRAPH - 画像タイプ	画像形式に合わせて指定 GIF : image/gif JPG/JPEG : image/jpeg PNG : image/png
og_site_name	OPEN GRAPH - サイト名	サイト名を指定
og_description	OPEN GRAPH - 説明	ページの説明を記述

各項目にトークンを利用することが可能です

Facebook対応

fb:app_id または fb:adminsの設定をする場合は、Metatag: Facebookモジュールを有効にします

Facebookでは、Facebookシェアデバッガでfb:app_idを設定しない「次のプロパティは必須です：fb:app_id」とエラーがでたり、いろいろなサイトでOGPを表示させるためにfb:app_idを必須という記事もありますが、Facebookインサイト（Facebook版のGoogle Analyticsのような解析ツール）を利用しない場合は設定は必須ではありません。

Twitter対応

Twitterは標準OGPタグの他に、twitter:cardというタグを付与するとシェアした際に表示形式をコントロールすることが可能です

twitter_cardタグを利用するには、Metatag: Twitter Cardsモジュールを有効にします

twitter:cardのタイプ

タイプ	指定	概要
Summary Card	summary	概要をカード表示 Image
Summary Card with Large Image	summary_large_image	概要に大きなイメージを付けてカード表示 imageフィールドとsummaryフィールドが必要です Image
App Card	app	アプリ配布用 iPhone app IDフィールド、iPad app IDフィールド、Google Play app IDフィールドいずれかが必要です
Palyer Card	player	動画サイト用 title, description, media player URL, media player width, media player height, imageフィールドが必要です