コーディング案件振り返り。
大先生が自分のコードを一瞬見てとりあえず言われたこと下記。

・OGP設定
・apple touch icon設定

してないね。って。
ふむ、基礎の箇所見落としていたわたくし。恥ずかしながら。全体の大枠だけ整えて、細かいところ疎かにしがちな性格。

OGPってなんだ?
存在すら知らなんだ。

◆OGP(Open Graph Protocol)とは
FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのhtml要素。

◆OGP設定する理由
適切に設定することで、どのようなページで何を伝えたいのかが明確。
そうすることで、共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能。

OGP設定をしていなかった場合、TwitterやFacebookなどのSNS側が自動的に説明文や画像を表示してしまい、ページ内容がユーザーに正しく伝わらなくなる。

◆OGP設定方法
①prefix属性にてOGPを使用することを宣言
②OGPに設定する必要情報をmetaタグに入れて追加

◆apple touch icon 設定はというと

これ。
ファヴィコンの設定とともに。

参考記事:
https://kaikoku.blam.co.jp/digimaguild/sns-pr/498#:~:text=OGP%E3%81%A8%E3%81%AF%E3%80%8COpen%20Graph,%E3%81%9F%E3%82%81%E3%81%AEhtml%E8%A6%81%E7%B4%A0%E3%81%A7%E3%81%99%E3%80%82

https://www.e-webseisaku.com/column/marketing/3947/

OGP設定は、要はSNSでシェアされた際に出てくるそのページについての画像や説明の設定ですね。自分も記事をシェアした際に出てくるのと出てこないのはなんの違いなのだろうと思っていたけど、OGP設定をしているかそうでないかだったんですね。

アップルアイコンは、スマートフォンでホームに登録した時や検索結果に表示されるアイコンのことですね、それはニュアンスでわかるか。

速攻でデザイナーさんにそれら用の画像を作成してもらって設定しました。(デザイナー様仕事が早い)

こういう細かいところや経験したことないことって気付けないので、今回、なるほどこういう設定も必要なのかと勉強になった。またもやよわよわっぷりを発揮してしまったぜ。
でも今回覚えたからいい。知らないことはたくさんあるもんだ。

c.sakyou

コメントを残す

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

CAPTCHA