METAとかLINK、Headの中身いろいろ

セレクション


<!DOCTYPE html>
<html dir="ltr" lang="ja-JP">
<head>

	<meta charset="UTF-8">
	<title> </title>

	<meta name="viewport" content="width=device-width">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="ページの概要">
	<meta name="msapplication-TileColor" content="#ee7836"><!--Windowsタイル画像の背景色-->
	<meta name="theme-color" content="#ffffff"><!--Windowsピン留め背景色-->

	<!-- Favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="/Path/to/favicon/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/Path/to/favicon/favicon.ico">

	<!-- CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
			・
			・//サイトに必要なCDNを読み込む
			・
	<!-- Common JS -->
	<script src="/Path/to/common.js"></script>
	<!-- CSS -->
	<link rel="stylesheet" href="/Path/to/destyle_v3-0-2.css">
	<link rel="stylesheet" href="/Path/to/style.css">

</head>

種類


<!-- 言語の指定 -->
<html lang="ja">
<meta http-equiv="content-language" content="ja">

<!-- 文字コードの指定 -->
<meta charset="UTF-8">

<!-- 互換モードの指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- リダイレクト -->
<meta http-equiv=”refresh” content=”10;URL='http://redirect.example.com'”>
<!-- Google非推奨のため、metaでのリダイレクトはサイトの評価を引き継げない。
（基本的には htaccessで 301 または 302 リフレッシュする） -->

<!-- ビューポートの指定 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>このページのタイトル｜社名、サイト名など</title>

<!-- ページのキーワード 指定しても無効なことが多く記述しないことも多い -->
<meta name="keywords" content="HTML,meta,Web,tag,サイト,">

<!-- ページの説明を指定 -->
<meta name="description" content="htmlのheadタグ内に記述されているものをまとめています。">

<!-- URLの正規化  PCとスマホでレイアウトを分けている場合にオリジナルのURLを記載したり、
ソースコード丸パクのサイト対策など -->
<link rel="canonical" href="https://FOOBAR.jp">

<!-- 代替えURLの指定  「英語サイト、スマホ用のページはこっちだよ」と指定できる -->
<link rel="alternate" hreflang="en" href="http://en.example.com/test">
<link rel="alternate" media="only screen and (max-width: 543px)" href="http://sp.example.com/test">

<!-- OGP(FacebookやInstagramなどのSNSでシェアした際に、Webページのタイトルや概要、イメージ画像、URL含めた
詳細情報を正しく伝えるためのHTML要素)使用の宣言 OGPを利用する際に宣言として記述が必要 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">・・・
</head>

<!-- OGPの指定  SNSでシェアされたとき用に記述 -->
構文：<meta property="og:{attr}" content="{val}">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="https://FOOBAR.jp">
<meta property="og:image" content="/path/to/images/ogp.png">
<!-- Facebook用OGPの指定 -->
構文：<meta property="fb:{attr}" content="{val}">
<meta property="fb:app_id" content="0123456789">
<!-- Twitter用OGPの指定 -->
構文：<meta name="twitter:{atter}" content="{val}">
<meta name="twitter:card" content="summary_large_image">

<!-- 著作権者を記述 -->
<meta name="author" content="">
<meta name="copyright" content="">
<meta name="author" content="">
<!-- 連絡先を記述  スパムに利用されるのでほとんどの場合記述しない -->
<meta name="reply-to" content="email@example.com">
<!-- 作成・更新日時の指定  メリットはない -->
<meta name="date" content="2023-09-15T02:34:56+09:00">

<!-- タッチアイコンの指定  スマホでホーム画面にショートカットを作成されたときのアイコン。
サイトルートにapple-touch-icon.pngを置くとmetaタグがなくても自動で適用してくれる -->
<link rel="apple-touch-icon" sizes="{size}" href="{url}">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<!-- Favicon -->
構文：<link rel="icon" type="{type}" sizes="{size}" href="{url}">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" href="/favicon.ico">

<!-- Windowsピン留め画像の情報ファイル  Windows8,10のスタートにピン留めされたときのアイコンをまとめて指定 -->
構文：<meta name="msapplication-config" content="{url}">
<meta name="msapplication-config" content="none">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- Windowsピン留め画像 -->
構文：<meta name="msapplication-TileImage" content="{url}">
<meta name="msapplication-TileImage" content="/img/pin-144x144.png">
<!-- Windowsピン留め画像の背景色 -->
<meta name="msapplication-TileColor" content="#ee82ee">

<!-- ウェブアプリマニュフェストの指定  PWA（Progressive Web Apps）には必須 -->
<link rel="manifest" href="/site.webmanifest">

<!-- ウェブアプリケーションとしての名前 -->
<meta name="application-name" content="アプリの呼称">

<!-- safari用マスクアイコンの指定、画像ファイルはSVGのみ。Safari11以前がターゲットに入っている時に記述 -->
<link rel="mask-icon" color="#ee82ee" href="/mask-icon.svg">

<!-- Chrome for Androidのタブの色指定 -->
<meta name="theme-color" content="#ee82ee">

<!-- 検索ロボットへのインデックスの指定 -->
<meta name="robots" content="nofollow">

<!-- CSS -->
<link rel="stylesheet" href="/path/to/css/reset.css">
<link rel="stylesheet" href="/path/to/css/style.css">
<link rel="stylesheet" href="/path/to/css/style.css" media="print">

TOP