헤더에 설명하는 다양한 요약 | OGP
개요
헤더에 설명 된 다양한 요약을 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>
Reference
이 문제에 관하여(헤더에 설명하는 다양한 요약 | OGP), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ksyunnnn/items/75a86d88f0b42b6251ed텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)