Joomla!, Microsoft Word, etc.

Joomla!

Joomla!における構造化データ(Schema.org)

Detail
Written by: fuku-chang
Category: Joomla!
Joomla!における構造化データ

Joomla!における構造化データ(Structured Data / Schema.org)について確認しました。

概要

  • 構造化データ(Structured Data)は当該のページに記されたの情報を検索サイト等のさまざまなサイトで活用できるように標準化したデータ形式のことです
  • 検索サイト等ではそのデータを元にリッチスニペットを表示することが出来ます
  • この構造化データに対して情報の定義化したものをボキャブラリーと呼び、そのデファクトスタンダードがSchema.orgであり、Google, Yahoo!, Microsoft, Yandex等が参画しています
  • また、構造化データを記述する仕様をシンタックスと呼び、Microdata, RDFa Lite, JSON-LD等があり、GoogleはJSON-LDを推奨しています
  • 詳細や使用用途については、次のリンクをご参照ください 
  • 当サイトをVaridatorにて検証したところ、Microdataに対するエラー表示がされました
  • Joomla!では構造化データの記述方法はMicrodataではなくGoogleが推奨しているJSON-LDを採用しています
  • そこで、Joomla!でのJSON-LDの設定方法を確認し、結果を検証しました

Nu Html Checkerによるページ検証

Nu Html Checker

検証手順

  • 次の手順は、URLを指定する[Check by address]の検証手順です
  1. Nu Html Checkerへアクセスします
  2. 必要に応じて[Show]オプションを選択します(複数選択可)

    • source: 指定したURLのソースコードを表示します．チェックされた箇所はハイライトされます(チェックオンを推奨します)
    • outline: 見出しを階層表示します
    • image report: img要素のalt属性確認に役立ちます
    • 上記をいずれも選択しない場合、チェックレポートのみ表示されます
  3. [Check by]オプションに[address]が指定されている(デフォルト)ことを確認します
  4. テキストボックスにチェックしたいページのURLを指定します
  5. [Check]ボタンをクリックして検証を実行します

当サイトの記事ページにてエラー表示

  • 当サイトのホームページ(トップページ)に対してのエラー指摘はございません
    • 実は検証当初、初歩的なミスによるエラーが複数表示されていたのですが、このエラー改善ついては別稿にてまとめる予定です
  • ところが、記事ページを検証すると次のとおりエラー指摘が1件表示されました

    Error: The itemprop attribute was specified, but the element is not a property of any item.
<meta itemprop="inLanguage" content="en-GB">

Microdataにおけるエラー指摘

記事ページにおけるMicrodataの記述

  • Nu Html Checkerが指摘した箇所…
    Error: The itemprop attribute was specified, but the element is not a property of any item.
<meta itemprop="inLanguage" content="en-GB">
    ですが、htmlの記述自体は問題ないようです
  • ただし、基本的なmicrodataの構文にはitemscope属性とitemtype属性が足りないように思われます
  • この箇所を出力しているのはCassiopeia Templateの次のファイルであることがわかりました
    • 「記事ページにおけるMicrodataとJSON-LDの混在 」の項で引用している投稿で知りました
    • /templates/cassiopeia_extended/html/com_content/article/default.php
      <meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
  • 当該phpファイルによる出力結果が次の図になります
    itemprop属性のみのMicrodata
  • 通常、itemprop属性を規定している要素の親要素にitemscope属性とitemtype属性が指定されますが、見当たりません
  • 更に、記事ページにMicrodataは上記箇所以外にありません

Microdataの修正

  • 試しに、親要素であるDIV要素にitemscope属性とitemtype属性を追加したところ、Varidatorが指摘したErrorは解消されました
    <div itemscope itemtype="https://schema.org/Article" class="com-content-article item-page<?php echo $this->pageclass_sfx; ?>">
    <meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
  • 以下に修正手順を説明します
Overrideファイルの作成
  • /templates/cassiopeia_extended/html/com_content/article/default.phpはCassiopeia Templateのオリジナルファイルを編集せず、OverrideファイルをChild TemplateであるCassiopeia_Extendedに作成します
  1. System > Templates > Site Template > Cassiopeia Extendedをクリックします
  2. Create Overrides tabをクリックします
  3. Components blk > com_content > articleをクリックします
    dfault.phpのOverrideファイルを作成
default.phpの修正
  1. Overrideファイルが作成されましたので、フォルダペインを操作してdefault.phpをクリックします
    default.phpを開く
  2. 39行のitemprop属性が記述されているmeta要素の親要素である38行のdiv要素にitemscope, itemtype属性を追記します
    itemscope, itemtype属性を追記
  3. Save & Closeをクリックします

記事ページにおけるMicrodataとJSON-LDの混在

  • 上記の対策でErrorは解消されましたが、Joomla!のIssue Trackerに混在に疑問を投げかけた投稿がありました
  •  [#43623] - [5.1.1] Why has "itemprop="inLanguage" been reverted in article default.php | Joomla! Issue Tracker

    Having manually changed all my site's overrides earlier to remove all itemprops because of the use of JSON-LD, I now find I have to change them all back again for components/com_content/tmpl/article/default.php. (see PR #43123 ) It was explained to me some time ago that microdata and JSON-LD should not be mixed. But now it is. Why?

    以前、JSON-LDの使用に伴い、サイトのすべてのオーバーライドを手動で変更してitempropsをすべて削除したのですが、components/com_content/tmpl/article/default.phpでは、それらをすべて元に戻す必要があることがわかりました。(PR #43123 参照) 以前、microdataとJSON-LDを混在させてはいけないと説明を受けていました。しかし、今は混在させています。なぜでしょうか？ (Google翻訳)

    [#43623] - [5.1.1] Why has "itemprop="inLanguage" been reverted in article default.php | Joomla! Issue Tracker
  • Joomla! 5.1.1における上記ページと参照の[#43123]を見ても議論の行方が見えないのですが、Joomla! 6.0同梱のCassiopeia Templateでも解消されていないということは、混在状態に戻したまま、ということになります
  • そもそも、Microdataによる構造化データがこの[inLanguage]しかないのも奇妙ですし、モヤモヤが残されたままです
  • 39行をコメントアウトをしてしまう選択もありますが、当サイトでは、VaridatorでのError指摘が解消されたことを由として、一旦は、この状態のままとすることとしました

Joomla!におけるJSON-LDによる構造化データの対応

  • Varidatorの結果を切っ掛けに、Microdataへの寄り道をすることとなってしましましたが、ここから本稿の本題です
  • Joomla! 5より構造化データのシンタックスをMicrodataからJSON-LDに移行しております
  •  Rich Snippets in Joomla 5 | Joomla! Community Magazine
    • Joomla! 5 CoreへのSchema.org / JSON-LDの実装を高らかに宣言しています
  •  J5.x:Schema org | Joomla! Documentation
    • ただし、当該ページは「Content is Incomplete.」と指摘されております
    • 9個のプラグインを説明するところ、Article PluginとBlogposting Pluginの2個の説明で頓挫してしまって、放置状態のままです

Schema.org pluginの設定

  • Joomla! CoreにはSchema.org / JSON-LDを実装するためのSchema.org pluginがデフォルトで用意されています
  • ただし、インストール直後はプラグイン自体は有効化されているものの、初期設定が実施されていないため、簡単な操作による設定後、Article編集画面のschema tabが有効になります
  1. 任意の記事のArticle: Editページを表示します
  2. Schema tabをクリックします
  3. Schema.org pluginを有効化するため、表示されたリンクをクリックします
    Schema.org Pluginを開く
    To use the schema.org functionality, you have to configure the plugin first.
Please select this link to open the plugin, configure and save.
  4. Plugins: System - Schema.org > Plugin tabが表示されます
    Schema.org Pluginダイアログ
  5. 当方サイトでは、Base TypeをOrganizationからPersonに修正しました
    Basic Typeの指定
  6. Select Userには当方サイトの管理者ユーザーを指定しています
    Basic Userの指定
    • Basic Userはschema/Person/base/のnameとして表示されます
  7. Save ＆ Closeをクリックします
  8. 編集する記事のArcitle: Editページに戻ります
  9. Schema tabをクリックすると、Schema blkにSchema Typeオプションが表示されるようになり、Schema.orgの使用が有効化されました
    Article:Editページに戻る

ArticleにおけるSchema.orgの編集

  1. 任意の記事のArticle: Editページを表示します
  2. Schema tabをクリックします
  3. Schema Type: Articleを選択します
    Schema Typeを指定
  4. Type: Articleに対するオプションが表示されます
  5. Image, Headline, Description, Author等のオプションを指定します
    Schema Type: Articleの詳細を指定(1)Schema Type: Articleの詳細を指定(2)
  6. Save(又はSave & Close)をクリックします

Schema.orgの確認

Chromeで確認

  • Chrome Developer Toolで確認します
    ChromeでJSON-LDを確認

Rich Results Testで確認

  1. Rich Results Testにアクセスします
  2. URL tabが選択されていることを確認して、テキストボックスに検証するページのURLを入力します
    URLを入力して検証実施
  3. 表示デバイスをSmart PhoneとDesktopから指定することもできます(デフォルトはSmart Phoneです)
  4. TEST URLをクリックします
  5. 検証結果の概要が表示されます
    検証結果概要
    • 右肩のアイコンで表示デバイスを切り替えることができます
    • サンプルではArticleとBreadcrumbsの2つのItemを確認しています
  6. VIEW TESTED PAGEをクリックすると右ペインにHTMLやSCREENSHOTを表示することができます
    HTMLを表示
  7. Detected structured data blkのType名(サンプルではArticleをクリックしています)をクリックするとデータの詳細を確認することができます
    検証結果詳細を表示

Schema Markup Validatorで確認

  1. Schema Markup Validatorにアクセスします
  2. Fetch URL tabが選択されていることを確認してテキストボックスに検証するページのURLを入力します
    URLを入力して検証実施
  3. Run testをクリックします
  4. HTMLとともに検証結果が表示されます
    JSON-LDの詳細表示
    • サンプルはSchema.org Pluginが出力したJSON-LDを詳細表示した状態です
    • HTMLはカラフルにシンタックスハイライト処理されていますし、データ表示もRich Results Testよりコンパクトで個人的に好みです

Microdataをコメントアウト

  • 予想されたことですが、Joomla! CoreのSchema.org pluginが出力したJSON-LDとCassiopeia Templateが出力したinLanguageしか指定していないMicrodataが並列状態になっています
    Microdataの詳細表示
  • GoogleのRich Results Testでは、image, author, headlineが見当たらないと指摘されている始末です
    Rich Results TestのMicrodata詳細表示
  • 最終的に、これを解消するためitempropの行はコメントアウトし、親要素であるdiv要素内のitemscope, itemtypeの記述も削除して、Microdataの記述は削除することとしました
    Microdataをコメントアウト
  • 出力されたHTMLを確認します
    ChromeでMicrodataコメントアウトを確認