「HTML - headタグ」の版間の差分

ナビゲーションに移動 検索に移動
 
419行目: 419行目:
==== SNS最適化 (OGP) 設定 ====
==== SNS最適化 (OGP) 設定 ====
metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br>
metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br>
<br>
これらの設定は、Open Graph Protocol (OGP) と併用されることが多い。<br>
Twitter Cardは、OGPの値もフォールバックとして使用する。<br>
<br>
設定後は、Twitter Card Validatorでプレビューを確認することができる。<br>
<br>
<br>
===== twitter:card =====
===== twitter:card =====
439行目: 444行目:
===== twitter:site =====
===== twitter:site =====
Twitterアカウントを指定する。<br>
Twitterアカウントを指定する。<br>
アカウント名には、必ず<u>@</u>を付ける必要がある。<br>
  <syntaxhighlight lang="html">
  <syntaxhighlight lang="html">
  <meta name="twitter:site" content="...">
  <meta name="twitter:site" content="@YourSite">
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
===== twitter:creator =====
===== twitter:creator =====
作成者のTwitterを指定する。<br>
記事の著者のTwitterアカウントを指定する。<br>
アカウント名には、必ず<u>@</u>を付ける必要がある。<br>
<syntaxhighlight lang="html">
<meta name="twitter:creator" content="@Author">
</syntaxhighlight>
<br>
===== twitter:title =====
シェアされる時のタイトルを指定する。<br>
40文字以内が推奨される。<br>
<syntaxhighlight lang="html">
<meta name="twitter:title" content="タイトル">
</syntaxhighlight>
<br>
===== twitter:description =====
シェアされる記事の説明を指定する。<br>
<syntaxhighlight lang="html">
<meta name="twitter:description" content="ページの説明">
</syntaxhighlight>
<br>
===== twitter:image =====
Twitterページの画像を指定する。<br>
  <syntaxhighlight lang="html">
  <syntaxhighlight lang="html">
  <meta name="twitter:creator" content="...">
  <meta name="twitter:image" content="https://example.com/image.jpg">
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>

案内メニュー