WEBデザイナーさん、見落としたらヤバいですよ!OGP設定できてますか!

ワタル

22.07.08

こんにちは、ワタルです。

今回は、駆け出しWEBデザイナーの方が見落としがちな「OGP設定」について解説していきます。

OGP設定とは?

OGPとは「Open Graph Protocol」の略で、「SNSでシェアされる際の見え方の設定」と思っていれば大丈夫です。

URLを共有したら、なんか変な文章やアイコンが出てきてしまった…なんて経験はありませんか?

WEB制作に携わる者として、これは見過ごせない事態です。

特にSNSマーケティングを行なっていく際は、コレが出来ていないと致命的なダメージを負ってしまいます。

それでは早速、設定の仕方を見てみましょう。

OGP設定の基本

まず最初に、htmlタグの中で「これからOGPの設定をするぞ!」という宣言をしてあげる必要があります。

これをprefix属性といいます。

次に、headタグの中に以下の情報を書き加えます。

これで完了です。

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用の指定

こちら3つを入れます。

“twitter:card”

アイキャッチ画像を表示するタグ。

“summary”を指定すると小さい画像が表示され、文字と横並びになります。

“summary_large_image”を指定すると、文字の下に大きい画像が表示されます。

“twitter:site”

自分のTwitterIDを指定します。”@shirako_design”のような感じです。

”twitter:creator”

投稿者の名前を入力します。ユーザー名や、ご自身で設定したい名前にしましょう。

facebook用の設定

最後にfacebookシェア用の設定です。

Twitterの時と同じように、ご自身のIDを入力します。

これで終了です。

まとめ

いかがでしたか?

正しくOGP設定をして、SNSマーケティングなどに活用しましょう!

それでは、また。

(いい声)

この記事を書いた人

ワタル

しらこデザインスタジオ管理人。埼玉県川越市出身。ワクワクすることが好きです。いつも元気です。よろしくお願いします。

この人の記事一覧
↑

お問い合わせはコチラ。
WEBに関するご相談
お待ちしております。