BLOGスタッフブログ

インソースマーケティングデザイン

2019.01.18 コーディング

apache2.4環境、Basic認証のかかったページでSNSシェア機能を使えるようにする方法

マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。

サイト制作時、テスト環境でSNSシェア機能を実装したいけど、Basic認証がかかっていて動作確認できない…なんてこと、ありませんか?
御多分に漏れず、私もはまりました。
その時の対策方法をご紹介します。

今回実装しようとしたのは、Facebookとtwitterのシェア機能です。
Basic認証がかかっていると、Facebookとtwitterのクローラーがはじかれてしまうため、シェアしたい情報を正常に取得できません。
そこで、Facebookとtwitterのクローラーのみ、認証不要でページにアクセスできるようにします。
ドキュメントルート直下の.htaccessに、以下を追記(加筆修正)します。

AuthType Basic
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と同様、ドキュメントルート直下に作成します。

User-agent: Twitterbot
Disallow:

User-agent: *
Disallow: /

これで無事、Facebookもtwitterも正常にシェアできるようになりました。
一番厄介だったのはapache2.4の書き方ですかね。。
どなたかの参考になれば幸いです。

以上、虎澤でした。

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します