こんばんは。フリークエンシーの岡田です。
10月に入り気温もようやく下がってきて、食欲の秋ですね。

Webサイトをを制作をする上でSNSのシェア機能などは欠かせません。
適切なOGP情報が設定されたページはサイトへのアクセス数アップにも効果的で、
SEO的に評価も上がるとも言われています。

今回は「OGP画像シミュレータ」というものを紹介したいと思います。 

まずはOGPについてさらったおさらい。

OGPとは、Open Graph Protocolの略で、
SNS上でWebページの内容を伝えるための仕組みのことです。
OGPをきちんと設定すると、URLを入力しただけで、
そのページのタイトル、概要、画像が自動的に表示されるようになります。
シェアする側の入力する手間も省けてシェア数もアップ!!

設定も簡単で、HTMLの<head>内に以下のようなタグを記述します。
<meta property=”og:title” content=”ここにタイトル” />
<meta property=”og:type” content=”ここにタイプ” />
<meta property=”og:url” content=”ここにページのURL” />
<meta property=”og:image” content=”ここにアイキャッチ画像のURL” />
<meta property=”og:site_name” content=”ここにサイト名” />
<meta property=”og:description” content=”ここにページのディスクリプション” />

さらったおさらいが終わったところで、本題にもどります。

ここで登場するOGP画像。
デバイスによっては正方形で表示されたり横長で表示されたりするため、
画像をデザインするのが少し大変だったりします。

そんな時に便利なのがこの「OGP画像シミュレータ」
使い方もなんとも簡単2ステップ。

1.サイトにアクセス


 01
OGP画像シミュレータアクセスします

2.画像をドラッグ&ドロップ

02

点線のエリア内に画像をドラッグ&ドロップすれば瞬時に結果が!!
03
 
こんな感じでどこが見切れるかなどがパッと見でわかるので、
あとは結果をみながらデザインを調整していきます。

せっかく設定しても画像が見切れてしまったり、綺麗に表示されないのは勿体ないですよね。
OGP画像の作成時にはぜひ「OGP画像シミュレータ」をご活躍ください。


♪今月のおすすめ作業BGM♪

「秋晴れの日に聴きたい曲」