トップページのみに設置する
HTML
<link rel="appendix" title="ページタイトル" href="（ニュースやブログのURLを指定）"/>
URLに日本語が含まれる場合の指定
日本語ドメインや、日本語のURLを利用している場合には便利なショートURLの情報を伝えることが可能。 日本語URLを使用していない場合は削除しても問題ない
HTML
<link rel="shortlink" href="http://www.●●.jp/?p=33" />
タイトルはその記事の情報を30文字程度で、メタディスクリプション（meta description）はその記事の内容を120文字程度の説明（概要）したものを記載する。
目次ページは、rel=”contents”
目次として提供されるページを
ジャンル
どのようなジャンルなのかを記載するmetaタグです。複数の場合はカンマで区切り記入。ジャンルに明確な決まりはない。
OGP
タイトル・メタディスクリプションを最適化すること。SNS用の「OGP」の設定タグなど。OGPは、「Open Graph Protocol」の略で、FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのこと。
general（一般的）、business（ビジネス）、computers（コンピューター）、entertainment（エンターテインメント）、internet（インターネット）、miscellaneous（いろいろ、寄せ集め）personal（個人的）などの他、hotelやguesthousesなど
サイトの構築された日付やページ作成日
「iso8601」の場合：2021年1月1日9時10分10秒は「2021-01-01T09:10:10+09:00」（年-月-日T時間:分:秒+タイムゾーン）
「rfc822」の場合：2021年1月5日月曜日9時10分10秒は「Mon, 05 January 2021 09:10:10 +0900」（曜日 日 月 年 時間:分:秒 +タイムゾーン）
HTML
<!-- ページ作成日-->
<meta name="creation_date" content="">
<!-- ページ更新日-->
<meta name="date" content="">
日本国内か、海外対応か
HTML
<!-- 日本-->
<meta name="Targeted Geographic Area" content="Japan" />
<!-- 海外対応-->
<meta name="coverage" content="worldwide" />
対象年齢を記述
ウェブサイトの対象年齢を記入するmetaタグ。4つのカテゴリーに合わせて記入。お酒、タバコ、18歳以上対象のウェブサイトの場合は「adult」を記載。 全年齢対象の場合は「general」または不要です。
general:全年齢対象
child：子供が対象
adult：大人が対象
safe for kids：子供が見ても問題がない場合
metaにOGPの設置
TwitterのOGPでは、カードのタイプ（大きさ）「summary」か「summary_large_image」のどちらかを選んで指定する。
summary：画像とテキスト情報が横並びに表示
summary_large_image：画像が横いっぱいに表示され、その下にテキスト情報が表示される。
複数ドメインで構成されたサイト
複数のドメイン（またはサブドメイン）で構成されているウェブサイトの場合に利用できるmetaタグで指定。
＜link title=”サイトタイトル” href=”http://www.●●.jp/” rel=”index” /＞
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- モバイルでの表示指定 --->
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="true" />
<!-- サイト情報と -->
<meta name="Targeted Geographic Area" content="Japan" />
<meta name="content-language" content="ja" />
<meta http-equiv="Content-Language" content="ja">
<meta name="build" content="（サイト構築日付2012-08-05T09:10:10+09:00）" />
<!-- 目次 --->
<link rel="contents" type="text/html" title="サイトマップ" href="https://xxx.com/sitemap.html">
<link rel="copyright" title="ページタイトル" href="（著作権のページURL：http://xxx.com/copyright）" />
<!-- ページのページのメディアタイプ -->
<meta name="medium" content="blog">
<meta name="classification" content="（ジャンル名,ジャンル名,ジャンル名）" />
<meta name="category" content="（カテゴリー名）">
<!-- ページ詳細情報 --->
<title>（ページのタイトル）</title>
<link rel="canonical" href="（正規ページURL）">
<meta name="pagename" content="ページタイトル">
<meta name="description" content="概要・説明文" />
<meta name="abstract" content="（descriptionの補足文）">
<meta name="keywords" content="キーワード,キーワード,キーワード" />
<meta name="creation_date" content="（作成日2012-08-05T09:10:10+09:00）" />
<meta name="date" content="（更新日2012-08-05T09:10:10+09:00）" />
<!-- お問合せ・ヘルプページなど --->
<link rel="help" title="ページタイトル" href="http://www.●●.jp/help.html"/>
<link rel="glossary" title="ページタイトル" href="(用語の説明をしたページがあればURL)) />
<link rel="search" title="ページタイトル" href="（検索ページ）" />
<link rel="bookmark" title="ページタイトル" href="（リンク集のページ）" />
<!-- 複数ページの場合の指定 -->
<link rel="index" title="ページタイトル" href="(目次のあるページhttp://www.●●.jp/contents/index.html)" />
<link rel="start" title="最初のページのタイトル" href="（URL）" />
<link rel='prev' title='前のページのタイトル' href='（URL）' />
<link rel='next' title='次のページのタイトル' href='（URL）' />
<link rel="archives" title="2012年08月" href="(ブログで月間ページがある場合そのURL)" />
<link rel="alternate" type="application/rss+xml" title="サイトタイトルなど" href="（RSSがあればsitemap.xmlがない場合クローラーはこのRSS情報を読む）" />
<!-- 多言語サイトの場合は、翻訳ページの指定 -->
<link rel="alternate" hreflang="ja" href="http://xxx.com/" /><!-- //日本語 -->
<link rel="alternate" hreflang="us" href="http://en-us.xxx.com/" /><!-- //英語 -->
<link rel="alternate" hreflang="ar" href="http://es-ar.xxx.com/" /><!-- //スペイン語 -->
<!-- OGP -->
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website または blog または article">
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>
<!-- OGP_FaceBook -->
<meta property="fb:app_id" content="[app_id]">
<!-- OGP_Twitter -->
<meta name="twitter:card" content="summary_large_image">
期間限定ページで削除される日付指定
HTML
<p><meta name="Expires" content="December 31, 2012" /></p>
ファビコンを最新にしておく
サイトのルートディレクトリに「favicon.ico」という名前でファイルを配置しておくとheadに記述が無くてもファビコンを読み込む。OSのバージョンアップにあわせてファビコンのサイズや設定が変わるため、最新のものにしておくと、ユーザビリティーが向上。
apple-touch-icon(Web Clipアイコン）のサイズとは
apple-touch-iconは端末によって解像度が異なり、画像が荒くなるため、複数のサイズを用意するといわれていたが、180×180の画像を1つだけ設定しておけば問題ない。
HTML
<link rel="apple-touch-icon" href="img.png" sizes="180x180">
Androidでタブの色を変更する方法
AndroidのChromeやGoogleアプリでタブの色をWebサイト側から設定することも出来る。
HTML
<meta name="theme-color" content="#191970">
Windows OS用のアイコン
Windows8やWindows10のスタート画面にWebサイトをピン留めした時の表示をリッチにしたい場合は、Windows用アイコンの設定を行う。表示サイズはLargeサイズも設置するのが推奨。
HTML
<!-- ms-application -->
<meta name="application-name" content="（サイト名）"/>
<meta name="msapplication-square70x70logo" content="small.jpg"/>
<meta name="msapplication-square150x150logo" content="medium.jpg"/>
<meta name="msapplication-wide310x150logo" content="wide.jpg"/>
<meta name="msapplication-square310x310logo" content="large.jpg"/>
<meta name="msapplication-TileColor" content="#D3D3D3"/>
