
-
2019.1.18HTML/CSS システム開発
フロントエンドエンジニア
虎澤 笑美
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の書き方ですかね。。
どなたかの参考になれば幸いです。
以上、虎澤でした。
スタッフおすすめの記事
その他の記事
-
2019.2.18Webプロモーション
Webコンサルタント
大柄 優太
【制作費無料】indeedにカンタンに求人情報を掲載できるサービスが登場!!
-
2019.2.18ディレクション
代表取締役
大橋 俊昭
クイック&ダーティ!?
-
2019.2.18Webプロモーション
Webコンサルタント
長澤 潤
indeed(インディード)は無料?有料?ー費用に関するお話ー
-
2019.2.14管理部
総務
大久保 美希
2018年度「ふるさと納税」体験談
-
2019.2.13デザイン
デザイナー
岩瀬 莉奈
webデザイナーになって最初にした仕事。約1年間を振り返る。
-
2019.2.5システム開発
システムエンジニア
大貫 晃一
ビジネスで、無料のSSL証明書 Let’s Encrypt を使用するべきか
-
2019.2.4Webプロモーション
Webコンサルタント
小山 恭平
「Googleしごと検索(Google for jobs)」に自力で求人を掲載・登録する方法
-
2019.1.30デザイン
デザイナー
小河原 隼佑
色が人に与える心理的効果とは
-
2019.1.29Webプロモーション
Webコンサルタント
高山 安住
Googleしごと検索(Google for jobs)ついにスタート!
-
2019.1.25Webプロモーション
Webコンサルタント
大柄 優太
「Googleしごと検索(Google for jobs)」の掲載方法・実装方法を説明してみた!