疑問ちゃん
OGPって何？どうやって書くの？
HTMLにOGPの書き方を簡単にご紹介したいと思います。
OGPとは？
FacebookやTwitterなどのSNSでWEBサイトやブログの記事がシェアされた時に、そのページのタイトル、画像、概要などを表示してくれる仕組みのことです。
Twitterだと↑の画像見たいな感じですね。ではどうやって書くか？簡単に説明します。
OGP設定の書き方
書き方は簡単です。<head>タグの中に記述するだけです。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="fb:app_id" content="App-ID" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@[Twitter ID]" />簡単にタグの説明をします。
ogtitleとは、その名の通りにタイトルです。ブログの記事のタイトル、ページタイトルなど。
og:typeとは、記事ならarticle,サイトのトップページならwebsiteと記述します。
og:urlは、サイトの絶対パスを記述してください。
og:imageも絶対パスで記述してね。
あとはサイト名、ページのdescriptionも書いてしまいましょう。
twitterのタグなどは、画像の大きさなど変えられるので調べて見てね。
まとめ
今回は簡単に解説したため、あまり深く書けませんでした。ワードプレスだと、プラグインで設定出来るのでheadタグに書く必要はありません。
それではまた。
