基本的に案件ごとにBasic認証を導入してテスト環境の構築を行いますが、OGPの確認するための記述を忘れてしまうのでまとめました。

Apache2.4での記述

まずは結論から。

# ---------- BEGIN Basic ----------
<Files ~ "^\.(htaccess|htpasswd)$">
  Require all denied
</Files>

AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic

# facebookとtwitterのユーザーエージェントを指定
SetEnvIf User-Agent "^Twitterbot.*$" tw_crawler
SetEnvIf User-Agent "^facebookexternalhit.*$" fb_crawler
SetEnvIf User-Agent "^facebookplatform.*$" fb_crawler2

# どれか一つでも当てはまればアクセス可能
<RequireAny>
  Require valid-user
  Require env fb_crawler
  Require env fb_crawler2
  Require env tw_crawler
</RequireAny>
# ---------- END Basic ----------

上記を.htaccessに追加して、.htpasswdを作成してそのパスを指定すれば動くようになります。

少し中身を解説すると、

.htaccessでBasic認証の設定に加え、SetEnvIfディレクティブで、TwitterとFacebookのユーザーエージェントを指定しています。

最後にRequireAnyで条件の一つに当てはまればOKというふうにしています。

Apache2.2での記述

2.2系だとこちらで動くかと思います。（試してないので間違えてたらすみません！）

# ---------- BEGIN Basic ----------
<Files ~ "^\.(htaccess|htpasswd)$">
  Order Allow,Deny
  Deny from all
</Files>

AuthUserFile /path/to/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
Require valid-user

# どれか一つでも当てはまればアクセス可能
Satisfy Any

# facebookとtwitterのユーザーエージェントを指定
SetEnvIf User-Agent "^Twitterbot.*$" tw_crawler
SetEnvIf User-Agent "^facebookexternalhit.*$" fb_crawler
SetEnvIf User-Agent "^facebookplatform.*$" fb_crawler2

Order Allow,Deny
Deny from all
Allow from env=fb_crawler
Allow from env=fb_crawler2
Allow from env=tw_crawler
# ---------- END Basic ----------

上記の設定を.htaccessに追加したら、きちんと動作しているか確認してみましょう！

Facebook→シェアデバッガー – Facebook for Developers

Twitter→Card Validator | Twitter Developers

OGPの設定についての詳しい解説はこちらにまとめています！

Facebook・TwitterのOGP設定ガイド【2022年3月時点】