DANCEJSON-LDによるブログの構造化データをHugoで実現する2016/07/02json-jdhugoTweetこのブログをJSON-LDで構造化データとして表現できるようにいろいろいじりました。使用した語彙はschema.orgです。Hugoにてメタデータの動的生成する方法を紹介しようと思います。いう2種類の目的があります。今回私が本ブログの構造化データを行なう目的は後者が大きいです。詳しくは『「構造化データ」がよく分かる!初心者向け徹底解説++SEOHACKS公式ブログ』にて詳しく書かれておりますので、そちらをご覧ください。この構造化データに欠かせないのはメタデータです。このブログを書いた人はmizukmbというユーザですという情報を機械が理解できるようにしなければなりません。これらを表現するために必要な語彙をschema.orgでは全世界に向けて公開・整備しています。技術的な話をすると、schema.orgはそれぞれの語彙全てに対してURLを提供しており、機械はそのURLに問い合わせることで意味を理解しています。雑ですが、まとめると構造化データはWebサイトに意味をもたせようという考え方であり、shcema.orgはそれを実現するための技術的な手段ということです。今回はこちらで構造化データを表現しました。JSON-LD以外にもRDFaやmicroformatsといった別の書き方もありますが、今回選んだ理由としてタグに埋め込む形式ではないのでコンテンツとメタデータを分離して管理できるGoogleがJSON−LDを一番推している(IntroductiontoStructuredData)からです。コンテンツとは別にメタデータを記述するので冗長性が増し、ファイルサイズが大きくなってしまう欠点があります。一長一短ではありますが、コードの読みやすさで言えば個人的にはJSON−LDが一番良いと思います。HugoでJSON−LDを作成する多くの場合はHugoに組み込みで備わっているVariablesで事足りますが、それだけではうまくいかないこともあります。schema.orgではブログを構造化データにするときのTypeはBlogやBlogPostingを用いることが多いですが、ブログのコンテンツを表すheadlineはGoogleの推奨では110文字以内と定められています。この要件を満たすためにHugoの関数機能(functions)を使います。HTMLタグを消してコンテンツをプレーンテキスト化するためにplainifyを使います。このfunctionはv1.6から追加された新機能ですので、手元のHugoのバージョンが低い場合は最新にアップデートしておいて下さい。}}あとはこれを110文字以内で切り抜きます。substrで範囲指定で文字を切り取れますのでこちらを使用します。}}これでオッケーです。気になる人は以下のようにreplaceを使って削除すると良いかもしれません。}}完全なJSON−LDは以下を参照下さい。構造としては全てのページにはBlogの構造化データを付与し、ブログの各コンテンツページのみBlogPostingを追加で付与する形としました。与えているメタデータですが、構造化データテストツールというGoogleが提供するテストツールで怒られないくらいの設定をしました。『必須』のメタデータ+推奨するメタデータと自分で適当に選んだメタデータです。これが正しいというわけではなく、まあこのくらいあればいいだろハハハって感じに選びました。画像周りはかなりテキトーなやつを渡しているので適切な画像を渡すようにしたいのと、これでもテストツールでいくつか怒られている箇所があるのでそこを修正したいです。