OGPとは？
OGPとは、Webの記事やページがSNSでシェアされた際に表示されるサムネイルとなる画像やタイトルなどのことを指します。HTML内では、「og:」として書かれるメタタグの一種となります。以下にOGPを設定してない場合のWebページの例やXでの見栄えの例を示します。
OGPを設定してた時の見栄えの例
OGP設定有り
OGP設定無し
Bloggerでページ毎のOGPを設定する方法
上記の通り視覚的にOGP設定してた方がいいですよね～。以下のメタタグをBloggerの<head>の部分と置き換えればこの例と同じようなOGPに設定できますので、お試し下さい。ただし、Bloggerのグローバルパラメータとかを使ってるので、Blogger専用になると思います。参考サイトをその下に掲載しておきますので、意味が理解できたら他のブログサイトにも応用できると思います。
OGPテンプレート
- <head prefix='og: http://ogp.me/ns#'>
- <meta content='data:blog.url' name='og:url'/>
- <meta content='data:title' name='og:title'/>
- <meta content='data:description' name='og:description'/>
- <meta content='article' name='og:type'/>
- <!-- ここからTwitterの設定-->
- <meta content='summary_large_image' name='twitter:card'/>
【参考サイト】
けっこうコード量も少なくて済むので理解するのにそれほど時間もかからないかと思います。
私も初心者ですので、もし誤り等あればご指摘頂けますと幸いです。
では、また次回。
0 件のコメント:
コメントを投稿