AMP ページでのPinterest ピンボタン、フォローボタン、ウィジェットの表示設定方法

本ブログは、パソコンとモバイル端末で表示されるページが全てAMPとなるネイティブAMPに対応しています。本記事では、amp-pinterestのコンポーネントページの説明を訳して、AMPページでのPinterest コンポーネントを実際にAMPページ上で表示させる設定を紹介します。

必須スクリプト

以下のスクリプトをAMPページのヘッダー部に設置します。

<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>

Pin it (ピン)ボタン

<amp-pinterest
  height=20
  width=40
  data-do="buttonPin"
  data-url="https://blog.blogging-life.com/"
  data-media="https://blog.blogging-life.com/wp-content/uploads/2018/09/blogging-life-blog.png"
  data-description="ネイティブAMP対応 ブロギングライフBLOG">
</amp-pinterest>

上のコードを使用したピンボタンの表示例です。ボタンを押すと実際に動作します。

パラメーターの説明

data-do (必須)

必ずbuttonPinをセットします。

data-url (必須)

ピン留め、または、ウィジェットに再作成されるための条件を満たしたURL。

data-media (必須)

ピン留めされる画像の条件を満たしたURL。もし、ピンが最終的にYouTubeなどのマルチメディアを含む場合は、高画質のサムネールをポイントする(指す)ようにします。

data-description (必須)

ピン作成フォームに表示されるデフォルトの説明(ディスクリプション)。意味のない説明の場合、ピンどめする人の多くは、ピンせずにフォームを閉じてしまうため、慎重に言葉を選んで下さい。

Pin it ボタンのサイズ

デフォルトの小さい長方形のボタン:

height=20 width=40



 
data-count="beside"を設定して、右側にピンカウントが表示される小型長方形のボタン:

height=20 width=85



data-count="above"を設定して、上にピンカウントが表示される小型長方形のボタン:

height=50 width=40
現状、当該設定は、ネイティブAMPのページでは適切に表示されません。

data-tall="true"を設定した大型の長方形ボタン:

height=28 width=56



data-tall="true" と data-count="beside"を設定して、右側にピンカウントが表示される大型の長方形ボタン:

height=28 width=107



data-tall="true" と data-count="above" を設定して、上にピンカウントが表示される大型の長方形ボタン:

height=66 width=56
現状、当該設定は、ネイティブAMPのページでは適切に表示されません。

data-round="true" を設定して表示される小さい丸型のボタン:

height=16 width=16



data-round="true" と data-tall="true" を設定して表示される大きい丸型のボタン:

height=32 width=32


フォローボタン(Follow ボタン)

<amp-pinterest
    height=20
    width=94
    data-do="buttonFollow"
    data-href="https://www.pinterest.com/blogging_life/"
    data-label="ブロギングライフ">
</amp-pinterest>
現状、上記コードを設置しても、ネイティブAMPのページではフォローボタンは表示されません。AMP Playgroundでは表示されます。

data-do (必須)

buttonFollow を必ず指定します。

data-href (必須)

フォローするPinterest ユーザープロファイルのURLを設定します。

data-label (必須)

フォローボタン上に表示させるテキストを含めます。

埋め込みピン ウィジェット

<amp-pinterest
  width=245
  height=330
  data-do="embedPin"
  data-url="https://www.pinterest.com/pin/718394578032786940/">
</amp-pinterest>

 

現状、AMPページでの埋め込みピン ウィジェットのテキスト部は、日本語が文字化けしてしまいます。

 

ちょっと戸惑うPinterest アカウント 検索結果のスニペット表示

「ブロギングライフ」で検索した結果に表示されるブロギングライフのPinterest アカウントページのスニペットが少し奇妙な内容になっていることに気付きました。

ブロギングライフ Pinterest アカウントページの検索結果表示

以下検索結果のページタイトル、URLに続く、ページ概要説明(スニペット)の内容です。

サイト運営者向けの情報を発信しています | ブロギングライフ さんは「ロボット, ビキニの写真, コンソール, Facebook, インターネット, WordPress」などのアイデアを保存しています。

コンソール以下の部分はまだ理解できますが、『「ロボット、ビキニの写真」などのアイデア(アイディアではなくアイデア!😉)を保存しています。』は、意味不明です。

この奇妙な説明となっている検索結果のPinterest アカウントのページをクリックすると以下の様にブロギングライフのPinterest ボードの一覧が表示されます。

ブロギングライフ Pinterest アカウント トップページ

ボードのタイトルは以下の通りです。

  • SEO
  • AMP
  • WordPress
  • Blogger
  • AdSense
  • SNS
  • Google プロダクト更新情報
  • サイト運営
  • セキュリティ
  • AdWords

SEOのボード内にある記事のピンで、Search Consoleが多く含まれていることから、コンソールと言う言葉がスニペットで使われたと推測しています。また、robots.txtも含まれているので、そこから「ロボット」のアイディアを集めていると解釈されたのかもしれません。

「ビキニ 」に関しては、AdSenseのポリシー関連の記事をピンどめしています。しかし、このピンのタイトルは水着となっています。Search Consoleがコンソール、robots.txtがロボットのように解釈されているので、水着がビキニになっていたとしてもそれほど不思議ではないかもしれません。

ブロギングライフ AdSense 関連の記事のピンウィジェット表示例

現時点では、PinterestのピンをAMPページで表示すると、日本語の部分が文字化けしてしまうため、スクリーンショットを添付しています。

スニペットの最後の「アイデアを保存しています。」の部分は、Pinterest側で自動生成している可能性もあると推測しています。

Pinterestのアカウントページのメタディスクリプションでは、以下の様なアカウントページの説明が出力されています。

<meta property="description" name="description" content="ブロギングライフ | サイト運営者向けの情報を発信しています" data-app>

説明があまりにも一般的で短すぎるかもしれないと改めて思いました。

アカウントページの説明などを見直してみようと思います。スニペット表示に変化が起きた場合は、本記事に追記するか、別途、新記事を投稿する予定です。

追記:

Pinterest アカウントプロファイルの説明文を変更して、数週間後、検索結果のスニペットにディスクリプションと同じ説明が表示されるようになりました。

Pinterest アカウントの検索結果のスニペット説明文を適切に表示させる対処法 – ブロギングライフ

その後のサイトリンク表示内容の変化

前回の投稿で、「ブロギングライフ」のクエリで検索した際、トップページの下に表示されるサイトリンクに「ブロギングライフ Facebook」と表示された件の更新情報を投稿します。

不思議なサイトリンクタイトルが含まれて表示されたのは数日程度の短い期間でした。その後、サイトリンクは一旦表示されなくなりました。今回、検索してみたところ、再びサイトリンクが表示されました。検索結果のスクリーンショットを添付します。

再び表示されるようになったサイトリンク

サイトリンクで表示されるページは以下の6つです。

  • Blogger101@ブロギングライフ
  • ブロギングライフ Simplicity
  • ブロギングライフBB
  • Cocoonの使い方・設定…
  • プロフィール
  • AMP

ブロギングライフ Facebookの代わりにAMPのカテゴリー一覧ページが表示されるようになりました。現時点でAMPカテゴリーには30記事投稿しています。それなりに記事数も増えてきました。他のカテゴリーと比較して、投稿記事数が多いカテゴリーではないのですが、AMP関連の話題を多く取り扱っていること、特に最近、AMP関連の投稿が多いのでトレンドとして評価されたのかもしれません。

サイトリンクで表示されるページの表示の順番も変化があります。サブドメインで運用しているBlogger関連の話題を中心に扱うBlogger101は、それなりに記事も増えてきたこと、取扱分野での評価もある程度得られてきているようなので、サイトリンクでも安定して1番目に表示されることが多くなってきています。

ブロギングライフ Simplicityは、パソコンページのサイドバーにブログカードを設置しています。この設置の状態の場合、サイト内のほぼ全ページにリンクが表示されることになります。サイドバーにリンクが貼られていることから、重要度も高いページであると検索エンジンから認識されているのかもしれません。

その一方で、最近、サイト(ページ)タイトルを変えたのですが、以前の名称のままサイトリンクに表示されています。クロールやインデックスはそれほど頻繁に行われていないことを間接的に物語っていると思います。

サイトリンクにプロフィールページが表示されることが多くなっているので、プロフィールページも見直して、改善、更新しようと考えています。

不思議なサイトリンクのタイトル

Googleの検索結果のサイトのページタイトル、URL、スニペットの下に続いて表示されるリンクは、サイトリンクと呼ばれています。以下はサイトリンクの代表的な表示形式の例です。

サイトリンクの表示例

サイトリンクは、サイト名や企業、ブランド名で検索した時、該当するサイトのホームページに続いてカテゴリーページなどが表示されることが多いです。

Googleの検索結果に表示されるサイトリンクの特徴

サイトリンクは、検索アルゴリズムが自動的に生成します。時期などによって、サイトリンクが表示される頻度、確率も変わることがあります。2018年秋になって、サイトリンクが表示される頻度が低くなった印象を持っていました。

「ブロギングライフ」のサイト名で検索しても、サイトリンクが表示されないことが多くなっていました。ここ最近、ブロギングライフだけでなく、他のサイトでも同様にサイトリンクが表示されにくくなっている印象を持っていました。(います。)

サイトリンクが表示されない場合は、サイトリンクで表示されていたカテゴリーやサブドメインのサイトが検索結果の個別のページとして表示されることが多いです。例えば、以下の検索結果表示の赤枠で囲った4ページは、これまでサイトリンクで表示されることが多かったカテゴリーやサブドメインのトップページです。

サイトリンクなしの検索結果表示例

サイト内のページだけでなく、関連サイトのトップページがサイトリンクで表示されることもあります。サブドメインやサブディレクトリーに別サイトを設置していても、同一サイトとして扱われることもあります。サイトリンクにサブドメインのサイトなどが表示される場合は、同一(グループ)サイトとして扱われていることを間接的に示していると考えます。

サブドメインとサブディレクトリにあるサイトの検索エンジンの取扱いについて

不思議なサイトリンクタイトル

2018年8月以降、サイトリンクが表示されにくくなっていると思っていたのですが、先日、「ブロギングライフ」のサイト名で検索すると久しぶりにサイトリンクが表示されました。しかし、その中に不思議なサイトリンク名を発見しました。

 ブロギングライフの検索結果に表示された不思議なサイトリンクタイトル

「Blogger101@ブロギングライフ」と「ブロギングライフBB」は、サブドメインで運営している関連サイトです。これまでもサイトリンクに含まれることが良くありました。「ブロギングライフ Simplicity」 と「Cocoonの使い方・設定…」は、サブディレクトリーに別のWordPressでメインサイトとは別のテーマ、SimplicityとCocoonを使用して運営しているサブサイトです。これらもサイトリンクに表示されることが多いです。「プロフィール・・・」はプロフィールページへのリンクです。どれも、サイトリンクで表示されても自然(妥当)と言えるページです。

「ブロギングライフ XX」と言うようなページ(関連サイト)タイトルは他にもあるので、「ブロギングライフ Facebook」も表示上は自然な感じです。しかし、「ブロギングライフ Facebook」と言うタイトルのサイトやページはサイト上にはありません。検索結果で表示されるページタイトルは、検索アルゴリズムが自動生成することもあります。アルゴリズムが適切、関連性が高いと思われるタイトルを生成して表示します。

一体何のページなのだろう?と思って、サイトリンクをクリックしてみました。「ブロギングライフ Facebook」から表示されたのは、サイトマップページでした。HTML サイトマップのページがなぜFacebookのタイトルが付けられたのか、不思議です。

ディスクリプション(概要)は、サイトマップであることを記載しています。サイトリンクの下にも少しスニペットで表示されています。

「Facebook」がサイトリンクタイトルに付加されたのかについての推測・考察

ブロギングライフのHTML サイトマップページには、サイト上の全ての記事タイトルがカテゴリー別に分類されて表示されています。ページ内のコンテントにFacebookという単語が非常に多く含まれている(記事タイトルで含まれるものが多い)わけではありません。

ページ内の情報をみても、なぜFacebookと言う名がサイトリンクに付与された見当はつきません。

最近、Facebookのブロギングライフページを閲覧するユーザー数が増えていることです。フォロワーは非常に少ないのですが、Facebook アナリティクスで表示され投稿の閲覧数は意外と多いです。(苦笑)

Twitterもフォロワー数は少ないのですが、閲覧数は結構あります。しかし、最近はTwitterよりもFacebookを閲覧する数が増えています。(Twitterの閲覧数が減っているのではなく、Facebookの閲覧数が増えています。)

検索結果のタイトルは、検索のアルゴリズムが自動生成したり、自動的に付与することがあります。アルゴリズムがユーザーのクエリや興味と関連性が高い、ページのコンテンツに含まれる内容を適切に表していると判断してタイトルが生成されるのが一般的です。

検索ワードを推測してユーザーのタイプを先読みして、表示するオートコンプリートGoogle検索アルゴリズムが生成します。オートコンプリートは、トレンド的なワードなども表示する場合があります。

もしかすると、(あまり考えられづらいのですが・・・)Facebook関連の興味を持ってブロギングライフを訪問するユーザーが最近多くなっていることが理由としてあるのかもしれません。

更新:その後

不思議なサイトリンクタイトルが含まれて表示されたのは数日程度の短い期間でした。その後、サイトリンクは一旦表示されなくなりました。そして、再び表示されるようになりました。サイトリンクの表示内容や順番などにも変化が見られます。

その後のサイトリンク表示内容の変化

 

サイトがモバイルファーストインデックスに移行したかの判別方法(番外編)

2018年9月18日から19日にかけて、モバイルファーストインデックスが有効になったとの通知を受け取ったサイト運営者の方が多いようです。Twitterの投稿などでもモバイルファーストについての話題を多く目にしました。

私のサポートするお客様のサイトもモバイルファーストが有効になった旨の通知がGoogle Search Consoleから届きました。

Google Search ConsoleからMobile First Indexへの移行通知

MFIになると、ページのキャッシュデータもモバイルクローラーが読み取ったものに変更になるとGoogleが発表しています。

Google は検索結果と Google のキャッシュ ページにモバイル版のページを表示します。

3月27日にモバイルファーストへの移行開始の公式な発表が行われた後、MFIに移行したサイトでは、検索結果からページデータが読み取られたGoogleキャッシュを表示しようとするとエラーになると言う事例が関係者の間で話題となりました。

本日、Googleの検索エヴァンジェリストの金谷さんが投稿したツイートに、「MFI が適用されて、キャッシュを見ようとすると 404 となる場合がありますが…」とのコメントがあり、まだエラーが表示される状態があることを知りました。


モバイルファーストインデックスとなった顧客のサイトで重要な検索クエリで検索結果を表示して、ページのGoogleキャッシュリンクをクリックしたところ、404エラーとなりました。

Google キャッシュページを表示した際404エラーになりました

顧客サイトの主要クエリの検索結果のトップページに表示される競合サイトのページの約半分もキャッシュリンクをクリックすると404エラーとなっています。恐らく、エラーになったページのサイトは、モバイルファーストに移行したためと思われます。

モバイルファーストインデックスへの移行は、サイト運営者には通知が届くことで分かりますが、現時点でページのキャッシュリンクが404エラーとなるかどうかで、そのサイトがモバイルファーストに移行した可能性が高いことを示していると思います。

少し変わった判別方法で、いつまで有効かは不明ですが、短期的には他サイトがモバイルファーストへ移行したかどうかの判別方法として使えるのではないかと考えています。

 
更新情報:

2018年10月20日頃から、モバイルファーストインデックス移行ページの検索キャッシュが404エラーとなる問題は解決したようです。現在は、MFIに移行したページの検索結果でキャッシュを表示した時に、404エラーにならずに、キャッシュページが表示されるようになっています。

モバイルファーストインデックス移行ページの検索結果のキャッシュ404エラーの問題が解決! – ブロギングライフ BB