GitHubでサイト公開とOGP設定

GitHubでサイトを公開

[Add file] → [Create new file]で新規ファイル作成画面を表示 → [Name your file...]にファイル名(abc.htmlなど)を入力 → [Edit new file]と書かれた大きい入力欄にソースコードを入力(貼り付け) → [Commit new file]

OGPを設定してWebサイトをSNSに投稿

OGP ... Open Graph Protocol(オープン・グラフ・プロトコル) SNS上で目立ちやすい表示になる

Twitter

html

<meta name="twitter:card" content="TwitterCardの種類" />

Twitter Cardの種類

Card	説明
summary	一般的な表示形式、小さい正方形の画像とタイトル、説明文を表示
summary_large_image	summaryの画像が大きく表示される形式
photo	画像が優先して表示される。画像をクリックするとツイート内容が表示される
gallery	複数枚(最大4枚)の画像を表示させる
app	アプリを紹介する際に利用。アプリの名前や紹介文、アイコン、評価、価格なども表示される
player card	動画サイト使用。動画、タイトル、説明文、URLが表示。プラットフォーム内で動画をインライン再生可能

OGP設定ができているか確認するには下記サイトを利用

https://cards-dev.twitter.com/validator

Facebook

手間はかかるが個人のアカウントは使わない html

<meta property="fb:app_id" content="App-ID(15文字の半角英数)" />

個人のFacebookアカウントから取得

html

<meta property="fb:admins" content="adminID(15文字の半角英数)" />

• App-IDとadminIDの取得方法はネットで検索

• OGP設定ができているか確認するには下記サイトを利用

https://developers.facebook.com/tools/debug/sharing/

共通

html

<meta property="og:title" content="タイトル" />
<meta property="og:type" content="種類" /> 
<meta property="og:url" cintent="URL" />
<meta property="og:image" content="画像URL" />
<meta property="og:site_name" conten="サイト名" />
<meta property="og:description" content="ディスクリプション,オブジェクトの1~2文の説明" />