head内に書くタグについて

7190 ワード
自分用メモ 自分用メモ テキストリンク

参考にしたもの
[サルワカ]https://saruwakakun.com/html-css/basic/head

[creive]https://creive.me/archives/17610
より詳しく見る場合にはこちらを参照してください。

基本的metaタグ

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

<title> そのページのタイトル </title>

<meta name="description" content="ページの内容を端的に要約し書いてください。">

<!-- IEで常に標準モードで表示させる -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- viewport(レスポンシブ対応) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 公開前は検索エンジンにインデックスさせず、他のページの巡回を促す。 -->
<meta name="robots" content="noindex,follow">

<!-- 電話番号の自動リンク化を無効 -->
<meta name="format-detection" content="telephone=no">

SEO対策の補助的措置

<!-- サイトのタイトル -->
<title>サイトのタイトルをここに書く</title>

<!-- キーワード -->
<meta name="keywords" content="キーワード1,キーワード2,キーワード3...body内で記載できなかったキーワードがあれば、入れておくと良いでしょう。">

<!-- サイトの説明 -->
<meta name="description" content="ページの要約。130文字以内(目安)">

<!-- 重複するURLを一本化 -->
<link rel="canonical" href="正規化するURL">

SNS対策

<meta property="og:site_name" content="サイト名をここに書きます。">
<meta property="og:title" content="上記titleと同じとする。">
<meta property="og:description" content="上記descriptionと同じとする。">
<meta property="og:type" content="website(トップページ)/article(下位ページ)">
<meta property="og:url" content="サイトのURL">
<meta property="fb:app_id" content="AppID">
<meta name="twitter:card" content="summaryあるいは、summary_large_imageの指定ができます。">
<meta name="twitter:site" content="サイトのURLを記載します。">
></head>

その他の指定

<!-- faviconの指定 -->
<link rel="icon" href="favicon.ico"> 
<!-- 外部のCSSファイル -->
<link rel="styleshee" href="CSSファイルのURL">
<!-- 外部のJsファイル --> 
<script src="JavaScriptファイルのURL"></script>
</head>

外部ファイル

<link href="text.css" rel="stylesheet">
<script src="text.js"></script>

その他

スマートフォン用のアイコン表示
<link rel="icon" href="faviconのURLをここに"> 

ios
<link rel="apple-touch-icon" href="./images/apple-touch-icon.png"sizes="180x180"

android
<link rel="icon" type="image/png" href="./images/android-touch-icon.png" sizes="192x192">
***
題解AT 5804【Kth Term】