ngrokやmeta属性の説明

ゲーム制作で使ってみた

code:html

<meta property="og:title" content="かあスレッド - 育成と戦闘のブラウザRPG">

<meta property="og:type" content="website">

<meta property="og:url" content="{{ url()->current() }}">

<meta property="og:image" content="{{ asset('images/ogp_image.jpg') }}">

<meta property="og:site_name" content="かあスレッド">

<meta property="og:description" content="ステータス育成と戦略バトル！気軽に遊べる体験版RPGが登場。">

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="かあスレッド - 育成と戦闘のブラウザRPG！">

<meta name="twitter:description" content="ブラウザで遊べるRPG体験版！仲間を育て、ボスに挑め！">

<meta name="twitter:image" content="{{ asset('images/ogp_image.jpg') }}">

title

XやLINEで太字で表示される、ページタイトル

type

動画ならvideo, ブログならarticleとか。websiteでOK

url

ページの正規URL。url()->current()で、常にそのページのURLを出しておけば良い

image

site_name

サイト全体の名前

description

ページの要約。薄めの文字で、XやLINEのシェア時に並ぶ

ローカルでどう検証するの？

code:sh

brew install ngrok

サイトで登録して、トークンを設定して、ローカルホストのURLを設定するだけ

https://scrapbox.io/files/68090bef88f418ff8a8d7e72.jpeg

https://scrapbox.io/files/68090fa91c5db25e9be7ae45.jpeg

https://scrapbox.io/files/68090f8cb2344ad94c615bb7.jpeg

ちなみに、og:twitterをコメントアウトするとこんな感じになる

https://scrapbox.io/files/6809103b8ba79a73f5a7d211.jpeg

めちゃめちゃ便利や