メインコンテンツに移動
vps eye catch
Drupal Logo

前回は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 ToolbarColorboxInsert, RedirectPathauto, 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

 

本日のメニュー

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

  1. 検索エンジンやSNSを活用したアクセス増加
    1. Google検索エンジンの仕組み
    2. サイトマップ
    3. メタタグ
  2. 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を有効化します

Image
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]から管理画面に移動します。

 

Image
Simple XML Sitemap basic configuration

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

 

 

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

 

Image
Simple XML Sitemap Configuration

主要な設定項目

サイトマップの更新間隔(Sitemap Generation Interval)

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

デフォルトのベースURL

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

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

重複リンクを除外

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

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

 

Inclusion設定

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

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

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

Image
Simple XML Sitemap Inclusion Configuration

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

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

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

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

Image
Simple XML Sitemap search engine

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

Image
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ヘルプに日本語で記載がありますので必要に応じてご確認ください

 

 

Image
Google Search Console

 

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

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

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

Image
Google Search Console - Sitemap

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

 

Microsoft Bing - Webmaster Tools

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

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

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

 

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

Image
Bing Webmaster Tools

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

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

Image
Bing Webmaster Tools - GSC Import

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

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

Image
Bing Webmaster Tools - Sitemap

 

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

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を有効化します

Image
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を有効化します

Image
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の管理画面から[管理] - [環境設定] - [検索とメタデータ] - [メタタグ]から設定を行います

Image
metatag configuration

[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]をクリックします

Image
Metatag Edit

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

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

Image
Metatag Configuration

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

メタタグ項目紹介

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

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

基本のタグ

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

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

Image
Metatag Basic

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

 

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

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

 

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

Image
Metatag Sample

 

Open Graph Protocol(OGP)対応

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

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

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

Image
Metatag OGP

 

 

ちなみに、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のような解析ツール)を利用しない場合は設定は必須ではありません。

 

Image
Metatag Facebook

Twitter対応

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

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

 

Image
Metatag Twitter Cards

 

twitter:cardのタイプ
タイプ 指定 概要
Summary Card summary

概要をカード表示

Image
Twitter Card Summary
Summary Card with Large Image summary_large_image

概要に大きなイメージを付けてカード表示

imageフィールドとsummaryフィールドが必要です

Image
Twitter Card Summary with Large 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フィールドが必要です

 

メタタグの確認

Facebookシェアデバッガー

Facebookでサイトをシェアした際にどのように表示されるかの確認するためのツールが提供されています。

https://developers.facebook.com/tools/debug/

 

Image
Facebook Share Debugger

確認をしたいサイトを入力すると下記のような情報が提示されます。

メタタグの説明でも記載しましたが、「次のプロパティは必須です:fb:app_id」と表示されますが、Facebookインサイト(Facebook版のGoogle Analyticsのような解析ツール)を利用しない場合は設定は必須ではありません。

 

Image
Facebook Share Debugger Result

 

想定した表示がされない場合は、メタタグの設定を見直してください。

すべてのRawタグを表示をクリックすると、Drupalが吐き出す生データの確認も可能です。

 

Twitter Card Validator

Twitterでもサイトをシェアした際にどのように表示されるかの確認するためのツールが提供されています。

https://cards-dev.twitter.com/validator

 

確認したいサイトのURLを入力すると以下の内容が確認できます

 

Image
Twitter Card Result

こちらも、想定した表示がされない場合は、メタタグの設定を見直してください。

 

だいぶ長くなりましたので、今回はここまでとします。

次回は、Google AnalyticsやMicrosoft Clarityなどのアクセス解析ツールの登録と、Google AdSenseの登録について書こうと思います。

 

 

Drupal9を始めるにあたって、Drupal 9 Web開発ことはじめ (技術の泉シリーズ(NextPublishing)が発売されたそうです。よかたら参考にしてみてください。