Web制作実務役立ち

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方
本ページにはプロモーションが含まれています。

ようこちゃん
ようこちゃん
BASIC認証かけた状態でOGPってどうやって確認すればいいんだろう…本番環境で認証外してからしか確認できないって怖くない…?

こんな疑問に答えます。

BASIC認証下ではOGP確認をすることができません。

OGP確認ツール」を使用しても、取得できていません。

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

実は私はほとんど本番環境で認証外してからOGP確認をしていたのですが、厳密にやるなら本番環境で認証をかけた状態でもOGP確認できたほうがいいですよね。

本来不可能なのですが、便利な拡張機能「Localhost OGP チェッカー」があるので、この使い方を解説します。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

Localhost OGP チェッカーとは?

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

Localhost OGP チェッカーは、サイトのheadタグをfirebaseアプリケーションにコピーし、ホスティングして確認用URLを発行できる拡張機能です。

生成されたURLは自動で15分で消えてくれますし、自分でも消せるので、セキュリティ面もいいです。

Localhost OGP チェッカーの使い方

まずはLocalhost OGP チェッカーをダウンロードし、有効化してください。

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

OGPを確認したいページで拡張機能ロゴをクリックすることで、起動できます。

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

もし表示されていない場合は、オンにする場合があります。

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

OGP確認したいページで拡張機能をクリックすると、以下のページになり、URLが発行されます。

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

これを「OGP確認ツール」に貼り付けて「確認する」をクリックすることで、OGP確認ができます。簡単!!

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

確認ツールは利用するたびにリロードしてください。正常に取得できない場合があります。

一応15分たったらページは消えますが、手動で消すことも可能なので、確認が終わったら「Remove This Page Now」を押しておきましょう。

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

コーディング課題でもOGP確認できる!

私が出しているコーディング演習課題では全員にBASIC認証をかけてもらっていますが、BASIC認証下でもOGPは確認できますので、ぜひ設定していただけたらと思います!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!