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="#9acd32">  <!--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> <!--jQuery-->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"> <!--Reset css-->

	<!--Common JS-->
	<script src="/Path/to/common.js"></script>

	<!--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'”>
	//metaでのリダイレクトはGoogle非推奨のため、サイトのGoogleの評価を引き継げない。
	//基本的には 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="内容の説明を簡潔に明記">

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

<!--代替え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-->
	// 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="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="/assets/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