AMP用(gamp)ページだけに正式な記事へ飛ぶリンクを表示したい

アメブロのAMP用ページには、正式な記事ページを表示するためのわかりやすいリンクがありません。

記事タイトルもリンクになっていないので、タップしても無反応です。

そこで、AMP用ページだけに正式な記事へのリンクを表示する方法を考えてみました。

まず、例をお見せします。

AMPで見ると、ここに当記事の正式ページへ飛ぶリンクが表示されます。
簡易ページで表示されています。正式なページを見るにはここをタップして下さい。 ]

↓実は、こんなタグを書いてあります。
<a href="記事のURL" rel="nofollow" style="display:none">簡易ページで表示されています。正式なページを見るにはタップして下さい。</a>

特徴は、
style="display:none"
の部分で、「この部分は表示しません」という意味のスタイル指定ですが、アメブロのAMP用ページではこのようなスタイル指定は全て削除されますので、結果、AMPだけでこのリンクが表示されます。

あと、細かいことですが、普段は隠れているので「隠しリンク」として検索エンジンから不当な評価を受けないように、念のため「rel=”nofollow”」も入れてあります。

リンクをタップして正式ページを見てくれるかどうかは読者次第ではありますが、現時点で、アメブロのAMP用ページは、

・画像が小さくてとても見にくい
・見出しすら通常文字と見分けがつかない

というとても残念な表示になっているだけでなく、冒頭に書いたように、正式な記事ページを表示するためのわかりやすいリンクもありません。

アメブロのAMP用ページの残念な表示についてはこちら↓

実際に検索結果からGoogleにキャッシュされたページが表示される時には、画面の上の方に正式ページへ行く手段があるにはあるんですが、

スマホで検索した時にはAMP表示となるのが当たり前になるまでは、ほとんどの人はこれに気付かないでしょう。

なので、こういったリンクを表示しておくことは、書く側の正式ページを見て欲しいという希望だけでなく、記事をしっかり読みたいと思ってくれる読者への配慮にもなるのではないでしょうか。

つまり、Win-Winということで^^

将来的にAMPが当たり前になり、また、アメブロのAMP用ページがもう少し改善されれば、こんなことを考える必要もなくなるかもしれませんが、今はまだ、いろいろと工夫する必要がありそうですね。

注意事項

(2015年末頃~)の新型のPC版デザインで、タイムライン型(リスト型)を使っている場合、「display:none」としても、リンクの文字が一覧ページには表示されてしまいますので、ご自身のブログのカスタマイズ状況に合わせて、記事のどの位置にリンクを表示するかも検討してみて下さい。

ちなみに、画像ではわかりやすいよう色付けしてありますが、実際は通常の文字と同じ表示になります。こんなに派手に目立って表示されるということではありませんので^^;