開発環境で、OGPタグをDBの値（ogp_title，ogp_description, ogp_image_pathなど）で生成し、SNSプレビューを確認する方法について記述します。
<ol data-line="2" class="code-line">
<li data-line="2" class="code-line">LocalhostOGPチェッカー（Chrome拡張機能）をインストール 
<a href="https://chromewebstore.google.com/detail/localhost-open-graph-chec/gcbnmkhkglonipggglncobhklaegphgn?hl=ja" target="_blank" rel="nofollow noopener noreferrer">https://chromewebstore.google.com/detail/localhost-open-graph-chec/gcbnmkhkglonipggglncobhklaegphgn?hl=ja</a>
</li>
</ol>
<img src="https://storage.googleapis.com/zenn-user-upload/5d1846452e9a-20251008.png" class="md-img" loading="lazy">
 
<ol start="3" data-line="9" class="code-line">
<li data-line="9" class="code-line">Laravelサーバを起動 
php artisan serve --host=127.0.0.1 --port=8000</li>
</ol>
 
<ol start="5" data-line="14" class="code-line">
<li data-line="14" class="code-line">OGPを登録したい画面にアクセス 
<a href="http://127.0.0.1:8000/" target="_blank" rel="nofollow noopener noreferrer">http://127.0.0.1:8000/</a>
</li>
</ol>
 
<ol start="6" data-line="19" class="code-line">
<li data-line="19" class="code-line">その画面を開いたまま、Chromeのアドレスバー右側にある拡張機能「LocalhostOGPチェッカー」をクリック</li>
</ol>
 
<ol start="7" data-line="23" class="code-line">
<li data-line="23" class="code-line">（自動で開く）赤枠内URLコピー</li>
</ol>
<img src="https://storage.googleapis.com/zenn-user-upload/f21c716cccdd-20251008.png" class="md-img" loading="lazy">
 
<ol start="7" data-line="29" class="code-line">
<li data-line="29" class="code-line">ラッコツールにURLを張り付けプレビュー確認 
<a href="https://rakko.tools/tools/9/" target="_blank" rel="nofollow noopener noreferrer">https://rakko.tools/tools/9/</a>
</li>
</ol>

開発環境でOGPのプレビューを確認する方法

Discussion