MDN（Mozilla Developers Network）で改めてHTMLについて学習しています。
知っているつもりを解決しようと試みたがいきなり意味不明になる始末です。
<meta>: 文書レベルメタデータ要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta
いわゆるメタデータのことで、サイトのページデータを説明するために記述します。
ブラウザ上では表示されず、ブックマーク時のタイトル<title>や検索結果での概要表示<descriptoin>がせいぜい目にすることになります。
いきなり意味不明なのは、上記サイトにあるはじめのメモはこの場所に必要なの？
メモ: name 属性は <meta> 要素において特別な意味を持ちます。また、 itemprop 属性は、 <meta> 要素にすでに name, http-equiv, charset のいずれかがある場合は設定してはいけません。itempropがややこしいのですが、item propatyを改めて設定するなということだと理解します。 itemprop属性は <span itemprop="genre">ホラー</span>とかできますが、これを利用したのがschema.orgなのでその仕様範囲で使うのが良いかと思います。
itemprop - HTML: HyperText Markup Language | MDN脱線しましたがこれが何気に重要でして、あとはいたって普通のmetaです。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/itemprop
ノーマルなmeta
- charset
文字エンコーディング - name
- author 作者名
- description ページの概要
- keywords キーワード
というのも検索キーワードが必ずしも name="descriptionに無いケースもあります。サイトデータの深くまで取得されているはずなのでname="ketwords"もなしですが、そうは言ってもちゃんとしておきたい。
name="description"を使うのはインデックスページなどコンテンツがない説明が必要なページの場合です。そもそも同じ文言で無くても良いのでは？
そこでproperty="og:"に行動を促すようなワードを入れていくことになります。
ノーマルなmetaタグだけで済ませたいところなのですが、クリップされたい！
止むなしです。
meta property
- <meta property="og:title" content="タイトルを入れる">
- <meta property="og:type" content="website">
- <meta property="og:url" content="URLを入れる">
- <meta property="og:site_name" content="ウェブサイトの名前">
- <meta property="og:description" content="ページの概要">
- <meta property="og:locale" content="ja_JP">
- <meta property="og:image" content="クリップ時に反映させたい画像URL">
- <meta property="og:image:width" content="画像の幅">
- <meta property="og:image:height" content="画像の高さ">
The Open Graph protocolちなみに上記サイトのフッタ部分に以下のリンクがエラーになります。
https://ogp.me/
Open Web Foundation Agreement, Version 0.9.
正しくは以下になります。
The OWF 0.9 Agreements - Necessary Claims - Open Web Foundation
http://www.openwebfoundation.org/legal/the-0-9-agreements---necessary-claims