ヘッダーに記述するいろいろのまとめ | OGPとか

4144 ワード
HTML pug OGP HTML テキストリンク

概要

ヘッダーに記述するいろいろのまとめをPugとhtml両方メモ

index.pug

meta(charset='utf-8')
meta(name='viewport', content='width=device-width,initial-scale=1.0')

title ヘッダーに記述するいろいろのまとめ
meta(name="description" content="いろいろかきます")

meta(property="og:title" content="ヘッダーに記述するいろいろのまとめ")
meta(property="og:description" content="いろいろかきます")
meta(property="og:image" content="http://example.com/asset/share.png")
meta(property="og:url" content="http://example.com/")
meta(property="og:type" content="website")
meta(name="twitter:card" content="summary_large_image")

link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous")
link(rel="shortcut icon" href="http://example.com/asset/favicon.ico")
script(src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js")
index.html
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<title>ヘッダーに記述するいろいろのまとめ</title>
<meta name="description" content="いろいろかきます" />

<meta property="og:title" content="ヘッダーに記述するいろいろのまとめ" />
<meta property="og:description" content="いろいろかきます" />
<meta property="og:image" content="http://example.com/asset/share.png" />
<meta property="og:url" content="http://example.com/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
<link rel="shortcut icon" href="http://example.com/asset/favicon.ico" />
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>