こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、htmlのリダイレクト設定が、Facebookで上手くできなくなった体験談をご紹介します。
リダイレクトとは？
まず簡単にリダイレクトについてご説明します。
リダイレクトとは、違うページに飛ばすことができる機能です。
Aページにアクセスしたら、Bページに飛ばされて、 Bページが表示されます。
htmlでリダイレクトさせるのは簡単で、下記の1行をhead内に記述すれば、任意のページにリダイレクトさせることができます。
<meta http-equiv="refresh" content="0; URL=https://www.example.com">リダイレクトの使い道
リダイレクトはあまり使わないですが、キャンペーンサイトなどで使うときがあります。
例えば、投票があるキャンペーンで、複数投票するものがあり、それをリツイートする形でキャンペーンに参加できるようなものです。
ここで大事なのは、SNS上で何を投票したか分かるようにし、そのリツイートを見たユーザーに興味を持たせ、キャンペーンに参加させることです。
なので、投票する分のシェア画像と文言が必要になります。
やり方はいくつもありますが、動的に作るとコストも掛かるし、サーバーにも影響あるので、静的に作ることも多いです。
Facebookでシェア画像が表示されない
キャンペーンページとは別に、投票する分のhtmlを作成し、そのhtmlにシェア画像と文言を仕込み、リツイートさせる形をとっていました。
さらにそのhtmlには冒頭のリダイレクトが記述されているので、SNS上で他のユーザーからアクセスがあった場合、キャンペーンページにリダイレクトされ、キャンペーンに参加できるという仕組みです。
今までこのやり方で問題なかったのですが、急にFacebookでシェア画像が表示されなくなってしまいました。
投票のシェア画像ではなく、キャンペーンページの情報が表示されます。
調べてみると、Facebook側の仕様変更により、リダイレクト後の情報を取得するようになったそうです。
JavaScriptでリダイレクトさせてみた
htmlのheadに直接リダイレクトの記述をするとダメなので、JavaScriptでリダイレクトさせてみました。
<head>
<script>
location.href = 'https://www.example.com';
</script>
</head>こうすることで、リダイレクト後ではなく、そのhtmlの情報をシェアすることができ、やりたいことが実現できました。
最後に
以上、htmlのリダイレクト設定が、Facebookで上手くできなくなった体験談をご紹介しました。
SNSやGoogleの仕様変更により、今まで出来てたことが、急に出来なくなることがあります。
出来なくなったのは自分だけではなく、全世界の人たちも同じなので、誰かしら解決策を見つけて、公開していることが多いです。
困ったことがあれば、1度調べてみましょう。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント