こんにちは、ワタルです。
今回は、駆け出しWEBデザイナーの方が見落としがちな「OGP設定」について解説していきます。
目次
OGP設定とは?
OGPとは「Open Graph Protocol」の略で、「SNSでシェアされる際の見え方の設定」と思っていれば大丈夫です。
URLを共有したら、なんか変な文章やアイコンが出てきてしまった…なんて経験はありませんか?
WEB制作に携わる者として、これは見過ごせない事態です。
特にSNSマーケティングを行なっていく際は、コレが出来ていないと致命的なダメージを負ってしまいます。
それでは早速、設定の仕方を見てみましょう。
OGP設定の基本
まず最初に、htmlタグの中で「これからOGPの設定をするぞ!」という宣言をしてあげる必要があります。
これをprefix属性といいます。
1 | <html prefix="og: https://ogp.me/ns#"> |
次に、headタグの中に以下の情報を書き加えます。
1 2 3 4 5 6 7 8 9 10 11 12 | <meta property="og:title" content="タイトル"> <meta property="og:type" content="website または blog"> <meta property="og:description" content="ページの簡単な説明"> <meta property="og:url" content="ページのURL"> <meta property="og:site_name" content="サイトのタイトル"> <meta property="og:image" content="サムネイル画像のURL> //Twitter用のタグ <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@TwitterのID"> <meta name=”twitter:creator” content=”コンテンツ作成者のユーザー名"> //Facebook用のタグ <meta property="fb:app_id" content="FacebookアプリID"> |
これで完了です。
og:title
WEBページのタイトルを入れます。
LPやブログ記事に設定する場合は、それぞれのタイトルをここで指定します。
og:type
このページが何のページなのかを入力します。
会社ホームページであれば “website”、ブログであれば”blog”と設定しましょう。
og:description
サイトの簡単な説明を入れます。
検索結果で表示された際に、タイトルの下に出てくる文章です。最大160文字程度に収めるのが適切とされています。
og:url
サイトのURLを入れます。僕の場合は”https://shirako-design.com”となります。
og:site_name
WEBサイト自体の名前を入力します。
上に書いた1つ目の”title”はそのページのタイトル、”site_name”は、サイトの名前なので混同しないようにしましょう。
og:image
webサイトのURLが共有された時に出るアイキャッチ画像のことを指します。
これは、ホームページなどの場合はロゴやファーストビュー、ブログの場合はアイキャッチを指定しましょう。
Twitter用の指定
1 2 3 | <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@TwitterのID"> <meta name=”twitter:creator” content=”コンテンツ作成者のユーザー名"> |
こちら3つを入れます。
“twitter:card”
アイキャッチ画像を表示するタグ。
“summary”を指定すると小さい画像が表示され、文字と横並びになります。
“summary_large_image”を指定すると、文字の下に大きい画像が表示されます。
“twitter:site”
自分のTwitterIDを指定します。”@shirako_design”のような感じです。
”twitter:creator”
投稿者の名前を入力します。ユーザー名や、ご自身で設定したい名前にしましょう。
facebook用の設定
最後にfacebookシェア用の設定です。
1 | <meta property="fb:app_id" content="FacebookアプリID"> |
Twitterの時と同じように、ご自身のIDを入力します。
これで終了です。
まとめ
いかがでしたか?
正しくOGP設定をして、SNSマーケティングなどに活用しましょう!
それでは、また。
(いい声)