こんにちは。整形外科医オルソ100% (@ortho100p)です。
Twitterのツイートにブログのリンクを貼ると、いつもと違うデザインになってしまうのですが、どうして？
・ツイッターのリンクから飛ぶとブログのデザインが変わる。
・Googleアドセンスにせっかく通ったのに広告がうまく表示されない。
今回はそんな問題を解決します。
- Twitter（ツイッター）のツイートにブログのリンクを貼ると、違うデザインになる！？
- amp=1&_twitter_impression=trueって何？
- AMPって何？
- はてなブログでAMP表示を消す方法
- まとめ：AMP化をやめればツイッターからのリンクでも同じデザインで表示できる！
Twitter（ツイッター）のツイートにブログのリンクを貼ると、違うデザインになる！？
ブログを書いて投稿し、ツイッターでブログ更新の報告をします。
☆30代医師
— オルソ100%@FIREドクター (@ortho100p) 2021年7月2日
☆子2人
☆１馬力
☆住宅ローン(35年)
☆投資歴3年
☆目立つ才能なく平凡
★ブログはじめました！
皆さんが生き生きとして楽しそうだったので。
どうぞよろしくお願いいたします。#投資家と繋がりたい#ブログ初心者と繋がりたい#はてなブログ
【プロフ…https://t.co/ahuhxkBb8z
このリンクをクリックすると、
違ーーーう！！
なぜかシンプルなデザインの記事が表示されます。
作製したのは下のデザインのはずなのにです。
まず自分の作ったデザイン。次がツイッターのリンクから表示されるページ。
文字だけのシンプルなデザインになってしまいます。
グーグルアドセンスの広告も表示されません。
どうして？
amp=1&_twitter_impression=trueって何？
そしてGoogleアナリティクスで閲覧されるページを見ると、
/entry/profile?amp=1&__twitter_impression=trueという変なURLになっています。
ツイッターのリンクから来た閲覧者はこのamp=1&_twitter_impression=trueが後ろについたURLのページを見ているようです。
どうやらAMPが怪しいぞ。
AMPって何？
AMPとはAccelerated Mobile Pagesの略でモバイル端末向けの高速表示が可能なHTMLページの事です。
Googleがページの高速化を押し進めているプロジェクトです。
メリット
・モバイルのブラウザのページ速度が速いため、ページ離脱を防ぐことができる。
デメリット
・ページのデザイン・レイアウトが壊れる
・Googleアドセンスの広告が表示されない
AMP化によってSEO効果が期待されるらしいのですが、面白みのないかえって読みにくいデザインになってしまいます。
読みやすいページを優先してAMP化をひとまずやめることにしました。
はてなブログでAMP表示を消す方法
簡単です。
はてなブログの「設定」→「詳細設定」で下に進むと「AMP」の設定部分があります。
チェックがされているので、そのチェックを外すだけです。
試しにツイッターのブログリンクをクリックすると、無事にPC画面と同じデザインのページが表示されました。
まとめ：AMP化をやめればツイッターからのリンクでも同じデザインで表示できる！
ツイッターからのリンクでデザインが変わるのはAMP表示が原因でした。
はてなブログproの設定で簡単に元に戻すことができました。
読みやすいデザインのためAMP化をやめましたが、それが正解かどうかはわかりません。
SEO効果を高めるためにはAMP化の流れに世の中はなっているのかもしれません。
ご覧いただきありがとうございました。
今後ともどうぞよろしくお願いいたします。
