自分のブログが でブックマークされた際に、「概要文」が期待していたものと違う内容になってしまったことは、ありませんか?

はてなブックマークで概要文がおかしい画面例
上のブックマークはコンテンツでない部分(この場合、当ブログのサイドバー内の文章)が「概要文」に用いられています。また、下のブックマークでは、本文に含まれるリガチャーアイコンが、そのまま文字列として出力されてしまっています(exit_to_app の部分は、本来はブラウザで閲覧時にアイコンに置換されます)。

これらは、はてブ® の機能として、ブックマークされるページの meta description(ページの概要を表すメタ要素)を無視し、ページのコンテンツから自動的に抽出・サマリーしてしまうことに起因したトラブルと言えます。

この記事では WordPress® 環境において PHP を使用し、これらの問題を根本的に解決する方法をご説明いたします。

※関連記事:『はてなブックマークに自分のページ(サイト)を紐付ける

Contents

概要

はてなブックマークからのアクセスを UA 判定し、ブックマークされる際に「専用の処理を行う」か「専用のコンテンツをレスポンスする」ことで、概要文を自分の思うようにコントロールすることが可能です。

WordPress ではない、その他の PHP 環境においても似たような処理を組み込むことは可能です。しかし PHP を使用していない Webサイトにおいては、本記事の内容は適用できませんので、ご注意ください。



はてなブックマークの UA 判定

ブックマークに関連したアクセスはいくつか種類があるのですが、その中でも以下の文字列を UserAgent(ユーザーエージェント, 省略表記: UA)に含むアクセスが、「概要文」の抽出に関係しているようです。

Hatena::Bookmark/2.00 (Hatena::Bookmark; master;)

そこでこの文字列を判定に用います。function.php ファイルに以下のコードを追記ください(このコードは後ほど使用いたします)。

はてブ専用のコンテンツを用意する

次に「はてブ専用のコンテンツ」として、現在のページの meta description にセットされている文字列をレスポンスする処理を実装してみます。

WordPress では、meta description の内容はプラグインを使用して実装する方が多いでしょうから、主要なプラグインとして Meta Manager および ALL in One SEO Pack の場合を例に挙げてご説明いたします。

※なお、この処理を単独で実装することはあまりお薦めしません。後述しますが、はてなブックマークの概要文は文字数が多いため、 meta description の内容だけでは文字数が足りず、コンテンツ本文の後、すなわちフッターの文字列をも概要文に抽出されてしまう可能性が高まるからです。現実的には、この処理を単独で実装するのではなく、その他の後述する処理を組み合わせる必要があるでしょう。

Meta Manager の場合

Meta Managerexit_to_appmeta descriptionmeta keywords の実装に特化したシンプルさが人気のプラグインです。最終更新から随分と時間が経っておりますが、アップデートが必要ない程にシンプルな故と言えるでしょう(実際にコードを覗いたわけではありませんが・・・)。

Meta Manager をお使いの場合は、function.php ファイルに以下のコードを追記ください。

なお、上記コードはページごとの meta description が定義されていない場合は、コンテンツ本文をレスポンスする処理になっています。もしその際にサイト全体の共通の(デフォルトの)meta description をレスポンスしたい場合は、17 行目をコメントイン(冒頭の // を削除)してください。

ALL in One SEO Pack の場合

ALL in One SEO Packexit_to_app は、各種の SEO 対策をまとめて実装できる機能の豊富さが人気のプラグインです。

ALL in One SEO Pack をお使いの場合は、function.php ファイルに以下のコードを追記ください。

こちらのコードもページごとの meta description が定義されていない場合は、コンテンツ本文をレスポンスする処理になっています。サイトのホームページに設定された(デフォルトの)meta description をレスポンスしたい場合は、18 行目をコメントイン(冒頭の // を削除)してください。

はてブ専用の処理を実装する

はてブ専用のコンテンツを用意するだけでは、充分でないかもしれません。冒頭の例のようにコンテンツの「手前」に存在するサイドバーの文章が概要文として抽出されてしまっている場合は、いくらコンテンツ本文を変更しても意味がないでしょう。

ここでは「はてブ専用の処理」として、サイドバーの出力を抑止する処理と、コンテンツ本文を書き換える処理を実装してみます。

サイドバーの出力を抑止する

まず WordPress テーマを例として、はてなブックマークからのアクセスに対してはサイドバーの出力を抑止する処理を実装してみます。

Flat WordPress Theme
Flat はシンプルなデザインが人気の無料の WordPress テーマです。

このテーマはコンテンツ本文より HTML 構造的に手前の(上の)位置でサイドバーを読み込んでいます。そのため、サイドバー内にある程度まとまった文章が存在すると、どのページをはてブでブックマークしても、同じ(サイドバー内の)文章が概要文として抽出されてしまうトラブルが発生します。

ここではテーマのヘッダーファイル(header.php)を修正し、はてなブックマークのサーバーからのアクセス時には、サイドバーを読み込まないようにします。

他のテーマをご利用の場合も、基本的に ファンクションを実行している箇所を特定し、その前後をこのような if 文で囲うことで対応出来ることと思います。

※なお、テーマファイルを修正する前に、そのテーマの を必ず作ってください(子テーマとは親テーマを継承し、それに対する変更差分のみをまとめた特殊なテーマです)。直接(親となる)テーマファイルを修正した場合は、そのテーマをアップデートする際に、ご自身の行った修正内容が全て失われてしまうでしょう。

コンテンツ本文を修正する

はてなブックマークの概要文は meta description の最適な長さ(全角で120文字以内)よりも、 100文字以上長く(260字程度まで)抽出されます。つまり、単に meta description の内容をレスポンスすると100文字近く文字数が足りずに、フッターなどの文字列から適当に補われてしまう可能性があるのです。

そこで最後に、既存のコンテンツを活かしつつ不要な文字列を除去したレスポンスを返す例として、冒頭に挙げた exit_to_app というリガチャフォント用文字列を除去する処理を取り上げます。

function.php ファイルに以下のコードを追記ください。

※検索対象($targets)と置換文字列($replacements)はそれぞれ配列ですので、適宜複数個を(複数行にわたって)定義可能です。また検索対象よりも置換文字列の数が少ない場合は、残りの部分には空の文字列が自動的にあてがわれます。

まとめ

本記事に取り上げたいくつかのテクニックを適宜組み合わせることで、はてなブックマークの概要文をあなたの思い通りにコントロールすることが出来るでしょう。

使用中のプラグインやレスポンスしたい内容に応じたカスタマイズが必要となるため、若干敷居が高いかもしれませんが、がんばって実装してみてください。

また関連した記事として『はてなブックマークに自分のページ(サイト)を紐付ける』も、是非ご一読ください。サイト管理者として登録することで、ブックマークされた内容を迅速に更新できるようになります。

ライセンス及び著作権に関する注記

本記事のヘッダー(サマリー表示された場合を含む)、SNS 共有画像、および共有ボタンに含まれる、はてなブックマークのロゴマーク は、クリエイティブ・コモンズ・ライセンス クリエイティブ・コモンズ 表示 – 非営利 – 継承 2.1 日本 ライセンス の下に 株式会社はてな より提供されたものです。




コメント

※本記事へのご指摘や各種コメントは にお寄せください。その際、ツイートに #ID3260 を含めるか、本記事へのリンクを含めるようお願いいたします(この上の「共有」欄にある TWITTER ボタン」をご利用いただくと自動で入力されます)。