OGPとは、”Open Graph Protcol” の頭文字をとったもので、Twitter等のSNSにてサイトを共有した時、その投稿内でサイト情報が表示されるシステムのことです。
サイトのイメージとなる画像、サイト名、説明文
が表示される。
実はそれもHTMLで一から表記する必要がございます。
それではその方法について、ご説明いたします。
実際に書いてみよう！
<meta property="og:title" content="MilkBlank">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.milkblank.com/img/ogp.png">
<meta property="og:url" content="https://www.milkblank.com">
<meta property="og:description" content="Webを中心に活動するサービス開発チーム。Webサイトや業務効率化システム、ポートフォリオや販売サイトなどのLPサイト、またスマホアプリまで対応いたします。">
<meta property="og:site_name" content="MilkBlank">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@milk_blank">
MilkBlankでは上記のように記載しております。
青文字の部分を編集して使用しましょう！
実際、内部はどうなっているのか。
それは至ってシンプルです。
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:image" content="表示画像URL">
<meta property="og:url" content="サイトURL">
<meta property="og:description" content="詳細説明">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="Twitterアカウント">上手に設定し、多くの人に見てもらえるOGPにしましょう！
コメント