html OGP样本（twitter / facebook）

Posted 2021-05-11

- https://developers.facebook.com/tools/debug/
- https://cards-dev.twitter.com/validator

  <meta property="og:title" content="ページタイトル" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="http://..." />
  <!-- 1200 x 630 --!>
  <meta property="og:image" content="http://.../og-fb.jpg" />
  <meta property="og:site_name" content="サイト名" />
  <meta property="og:description" content="詳細テキスト" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="サイト名">
  <meta name="twitter:description" content="詳細テキスト">
  <!-- 600 x 315 --!>
  <meta name="twitter:image" content="http://.../og-tw.jpg">

<!-- オリジナルボタン --!>
<li><a href="http://www.facebook.com/share.php?u=http://..." onclick="window.open(encodeURI(decodeURI(this.href)), 'FBwindow', 'width=554, height=470, menubar=no, toolbar=no, scrollbars=yes'); return false;" rel="nofollow">facebook</a></li>
<li><a href="http://twitter.com/share?url=http://...&text=詳細テキスト" target="_blank">tweet</a></li>

<!-- 既存のボタン --!>
<!-- body 直下 --!>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://..." data-text="タイトルテキスト">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="fb-share-button" data-href="http://..." data-layout="button" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=[サイトURL]&amp;src=sdkpreparse">シェア</a></div>