整形外科Dr. オルソ100% の生き方カルテ

サイドFIREを目指す医師が会社やお金に縛られない自由な生き方・働き方をポジティブに追い求めていくブログです。

Twitter(ツイッター)にブログのリンクを貼ると、違うデザインになる!?

f:id:ortho100p:20210803231814j:plain

こんにちは。整形外科医オルソ100% (@ortho100p)です。

Twitterのツイートにブログのリンクを貼ると、いつもと違うデザインになってしまうのですが、どうして?

・ツイッターのリンクから飛ぶとブログのデザインが変わる。

・Googleアドセンスにせっかく通ったのに広告がうまく表示されない。

  

今回はそんな問題を解決します。

 

 

 

Twitter(ツイッター)のツイートにブログのリンクを貼ると、違うデザインになる!?

ブログを書いて投稿し、ツイッターでブログ更新の報告をします。

 このリンクをクリックすると、

f:id:ortho100p:20210803214748j:plain

 

違ーーーう!!

なぜかシンプルなデザインの記事が表示されます。

作製したのは下のデザインのはずなのにです。

f:id:ortho100p:20210803215053j:plain

 

まず自分の作ったデザイン。次がツイッターのリンクから表示されるページ。

f:id:ortho100p:20210803214726j:plain f:id:ortho100p:20210803215317j:plain

文字だけのシンプルなデザインになってしまいます。

グーグルアドセンスの広告も表示されません。

どうして?

 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」の設定部分があります。

f:id:ortho100p:20210803225144p:plain

チェックがされているので、そのチェックを外すだけです。

試しにツイッターのブログリンクをクリックすると、無事にPC画面と同じデザインのページが表示されました。

 

まとめ:AMP化をやめればツイッターからのリンクでも同じデザインで表示できる!

ツイッターからのリンクでデザインが変わるのはAMP表示が原因でした。

はてなブログproの設定で簡単に元に戻すことができました。

読みやすいデザインのためAMP化をやめましたが、それが正解かどうかはわかりません。

SEO効果を高めるためにはAMP化の流れに世の中はなっているのかもしれません。

 

ご覧いただきありがとうございました。

今後ともどうぞよろしくお願いいたします。

-おすすめ記事-