インソースマーケティングデザイン
2019.01.18 コーディング
apache2.4環境、Basic認証のかかったページでSNSシェア機能を使えるようにする方法
マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。
サイト制作時、テスト環境でSNSシェア機能を実装したいけど、Basic認証がかかっていて動作確認できない…なんてこと、ありませんか?
御多分に漏れず、私もはまりました。
その時の対策方法をご紹介します。
今回実装しようとしたのは、Facebookとtwitterのシェア機能です。
Basic認証がかかっていると、Facebookとtwitterのクローラーがはじかれてしまうため、シェアしたい情報を正常に取得できません。
そこで、Facebookとtwitterのクローラーのみ、認証不要でページにアクセスできるようにします。
ドキュメントルート直下の.htaccessに、以下を追記(加筆修正)します。
AuthName “Require Auth”
AuthUserFile /home/webadmin/www/vhost/hogehoge.com/.htpasswd
SetEnvIf User-Agent “^facebookexternalhit.*$” fb_crawler
SetEnvIf User-Agent “^facebookplatform.*$” fb_crawler2
SetEnvIf User-Agent “^Twitterbot.*$” tw_crawler
<RequireAny>
Require valid-user
Require env fb_crawler
Require env fb_crawler2
Require env tw_crawler
</RequireAny>
すでにBasic認証の記述があると思うので、その箇所を上記のように書き直します。
ちなみにこれ、apache2.4用の書き方です。
2.2の書き方だと動作しませんのでご注意ください。
これで無事にクローラーが情報を取得できるようになりました。
…が、twitterでは、これでも情報を取得できない可能性があります。
公式にも書いてありますが、twitterはrobots.txtの情報を優先して見るそうです。
robots.txtでtwitterbotが許可されていないとダメということですね。
ということなので、robots.txtに以下のように記述します。
robots.txtが存在しない場合、.htaccessと同様、ドキュメントルート直下に作成します。
Disallow:
User-agent: *
Disallow: /
これで無事、Facebookもtwitterも正常にシェアできるようになりました。
一番厄介だったのはapache2.4の書き方ですかね。。
どなたかの参考になれば幸いです。
以上、虎澤でした。