OGは何ですか?

3199 ワード

  • リンクプレビュータイトル、説明、画像のオープングラフィックラベルを決定!
  • フェイスブック、NAVER、KakaoTalkなどで提供されているリンクのプレビュー→どうしますか?!OpenGraphプロトコルで!
  • ユーザが
  • をクリックする前に、ウェブサイトをスクロールし、HTML headのメタデータをスクロールしてプレビュー画面
  • を生成する.
  • 主なhtml metoタグ:title、description、image
  • <html>
      <head>
    	  <meta property="og-title" content="뿌린만큼 거두리라 다운받기">
    	  <meta property="og-description" content="뿌린만큼 거두리라 <br> 가장쉽고 (중략)">
    	  <meta property="og-image" content="http://lh3.googleusercontent.com/-v-...">
      </head>
    </html>
  • 具体的な動作原理
  • ユーザは、入力ウィンドウにリンク
  • を入力する.
  • フェイスブック、NAVERブログ、KakaoTalk入力ウィンドウの文字列が「link」(通常は正規表現であり、その文字列がリンクであることを示す)
  • であることを決定する.
  • 「link」と判定された場合、Facebook、NAVERブログ、KakaoTalkのChrollerは事前にこのサイトにアクセスし、HTML Headからオープングラフィックメタデータ
  • をキャプチャします.
  • において、og:title、og:description、og:imageは、それぞれタイトル、説明、および画像情報を表す.
  • の情報に基づいてプレビュー画面を生成する.
  • ただし、キャッシュ・ストレージ・セクションがある場合は、情報を変更しても、キャッシュ・ストレージ・セクションによって変更前の情報が変更される可能性があります.