プログラミングの学習ならUdemyがおすすめです!詳細はこちら

OGPとは?書き方など簡単に解説

疑問ちゃん

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タグに書く必要はありません。

それではまた。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です