未経験のwebサイト制作の勉強

未経験からwebサイト制作の勉強をし、現在制作会社で働いております。

OGPを設定する

SNSでサイトのURLを共有・シェアされることが多くなってきたかと思います。
その際にURLだけでなく、画像と一文が表示されますがその画像と一文の設定が「OGP」です。

①画像の制作
だいたいコーポレートサイトやお店のサイトだとロゴを使うことが多いです。
画像のサイズですが、1200×630px以上が推奨されているようです。
また、正方形で表示されるところもあるので私は、1200×630pxで作成しその中で630×630pxの正方形を配置し表示させたいもの(ロゴなど)はその中に配置しています。

⇊イメージ図
f:id:study-aaa:20210724100527j:plain

このように作成すれば長方形、正方形表示どちらにもうまく対応できます。


②OGPの設定
1)htmlでの設定の場合
OGPとは?設定するべき理由と設定方法について | デジマギルド

2)WordPressでの設定の場合
「All in one SEOで簡単に設定できます!

・All in one SEOソーシャルネットワーク
f:id:study-aaa:20210724101206p:plain

・>Facebook / Twitter
まず画像を設定します
f:id:study-aaa:20210724101336p:plain
画像と一緒に表示する文章の設定をします
f:id:study-aaa:20210724101442p:plain
デフォルトのサイトのタイトルとキャッチフレーズで良いかと思います。
Twitterのほうは画像設定のみ

他細かいオプションがありますが表示されているものを確認して調整してみると良いかと思います。
以上で終わりです。


【OGP確認ツール】
Twitter
cards-dev.twitter.com
Facebook
developers.facebook.com



WordPresは簡単ですね。。