こんな疑問に答えます。
BASIC認証下ではOGP確認をすることができません。
「OGP確認ツール」を使用しても、取得できていません。
実は私はほとんど本番環境で認証外してからOGP確認をしていたのですが、厳密にやるなら本番環境で認証をかけた状態でもOGP確認できたほうがいいですよね。
本来不可能なのですが、便利な拡張機能「Localhost OGP チェッカー」を使えば可能なので、この使い方を解説します。
既にOGP設定が終わっているのを前提にしています。
まだの方は以下記事を参考に終わらせておきましょう。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
Localhost OGP チェッカーとは？
Localhost OGP チェッカーは、サイトのheadタグをfirebaseアプリケーションにコピーし、ホスティングして確認用URLを発行できる拡張機能です。
生成されたURLは自動で15分で消えてくれますし、自分でも消せるので、セキュリティ面もいいです。
Localhost OGP チェッカーの使い方
まずはLocalhost OGP チェッカーをダウンロードし、有効化してください。
OGPを確認したいページで拡張機能ロゴをクリックすることで、起動できます。
もし表示されていない場合は、オンにする場合があります。
OGP確認したいページで拡張機能をクリックすると、以下のページになり、URLが発行されます。
これを「OGP確認ツール」に貼り付けて「確認する」をクリックすることで、OGP確認ができます。簡単！！
確認ツールは利用するたびにリロードしてください。正常に取得できない場合があります。
一応15分たったらページは消えますが、手動で消すことも可能なので、確認が終わったら「Remove This Page Now」を押しておきましょう。
コーディング課題でもOGP確認できる！
私が出しているコーディング演習課題では全員にBASIC認証をかけてもらっていますが、BASIC認証下でもOGPは確認できますので、
今回の記事を参考に、ぜひ設定していただけたらと思います！
その他Web制作で見逃しがちなポイント集
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
