html メタ内容指定の『meta タグ』について

1-はじめに

ホームページにおける『meta タグ』について
※下書き保存しようとしたら、間違えて公開してしまいました。
また後日、更新します。

目次

項番	ページ内リンク	説明
1	1.はじめに
2	2.説明
5	5. さいごに

更新履歴
2024/08/01　・記事公開

2-説明

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!---favicon--->
<meta name="msapplication-square70x70logo" content="favicon/png/site-tile-70x70.png">
<meta name="msapplication-square150x150logo" content="favicon/png/site-tile-150x150.png">
<meta name="msapplication-wide310x150logo" content="favicon/png/site-tile-310x150.png">
<meta name="msapplication-square310x310logo" content="favicon/png/site-tile-310x310.png">
<meta name="msapplication-TileColor" content="#0078d7">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="favicon/png/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicon/png/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon/png/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon/png/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon/png/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon/png/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon/png/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon/png/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/png/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="36x36" href="favicon/png/android-chrome-36x36.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon/png/android-chrome-48x48.png">
<link rel="icon" type="image/png" sizes="72x72" href="favicon/png/android-chrome-72x72.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/png/android-chrome-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon/png/android-chrome-128x128.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon/png/android-chrome-144x144.png">
<link rel="icon" type="image/png" sizes="152x152" href="favicon/png/android-chrome-152x152.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/png/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon/png/android-chrome-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon/png/android-chrome-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon/png/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="36x36" href="favicon/png/icon-36x36.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon/png/icon-48x48.png">
<link rel="icon" type="image/png" sizes="72x72" href="favicon/png/icon-72x72.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon/png/icon-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon/png/icon-128x128.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon/png/icon-144x144.png">
<link rel="icon" type="image/png" sizes="152x152" href="favicon/png/icon-152x152.png">
<link rel="icon" type="image/png" sizes="160x160" href="favicon/png/icon-160x160.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon/png/icon-192x192.png">
<link rel="icon" type="image/png" sizes="196x196" href="favicon/png/icon-196x196.png">
<link rel="icon" type="image/png" sizes="256x256" href="favicon/png/icon-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="favicon/png/icon-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon/png/icon-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/png/icon-16x16.png">
<link rel="icon" type="image/png" sizes="24x24" href="favicon/png/icon-24x24.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/png/icon-32x32.png">
<link rel="manifest" href="favicon/manifest.json">
<!---/favicon--->
<!---タイトル--->
<title>Redstar</title>
<meta name="description" content="自営業　Redstarホームページ ITコンサルタント PC納品、サーバー納品、施設内ITインフラ整備・設定PC納品windowsアプリ（アプリケーション開発・継続的な保守）、 ホームページ制作（HTML.css.java等コーディング）、WEBプラットフォーム（予約管理システム）等、VPN、PC修理・データ復旧、等　ゲーミングPC・業務用PC・サーバーPC　納品致します">
<!---/タイトル--->
<!-- X twitter meta -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Redstar　ホームページ">
<meta name="twitter:description" content="Redstar「PCのハードウェア・ソフトウェアに類する疑問を解決します」">
<meta property="og:site_name" content="Redstar">
<meta property="og:title" content="Redstar ホームページ toppege">
<meta property="og:type" content="article">
<meta property="og:url" content="https://redstar-hp.netlify.app/index">    
<meta property="og:image" content="https://redstar-hp.netlify.app/images/logo.png">
<meta property="og:description" content="Redstar　ホームページ">
<!--/ X twitter meta -->
<!---css--->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ios_reset.css">
<link rel="stylesheet" href="css/pink_reset.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/Google Fonts.css">
<link rel="stylesheet" href="css/inview.css">
<link rel="stylesheet" href="css/FontAwesome.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/style/style.css">
<link rel="stylesheet" href="css/style/header_style.css">
<link rel="stylesheet" href="css/style/main_style.css">
<link rel="stylesheet" href="css/style/bg1_style.css">
<link rel="stylesheet" href="css/style/table_style.css">
<link rel="stylesheet" href="css/style/list_style.css">
<link rel="stylesheet" href="css/style/member_style.css">
<link rel="stylesheet" href="css/style/FAQ_style.css">
<link rel="stylesheet" href="css/style/etc_style.css">
<link rel="stylesheet" href="css/style/submenu_style.css">
<link rel="stylesheet" href="css/style/drop_style.css">
<link rel="stylesheet" href="css/style/hamburger_style.css">
<link rel="stylesheet" href="css/style/news_style.css">
<link rel="stylesheet" href="css/style/btn_style.css">
<link rel="stylesheet" href="css/style/footer_style.css">
<link rel="stylesheet" href="css/style/smartphone_style.css">
<link rel="stylesheet" href="css/style/youtube_style.css">
<!---/css--->

< metaメタ 属性="属性値" >

content-language 文書の記述言語を指定するために使用しますが、この指定は非推奨です。代わりにlang属性を使用しましょう。
content-type 文字コードを指定するために使用します。
default-style 優先スタイルシートを指定するために使用します。
refresh 自動更新やリダイレクトを指定するために使用します。
set-cookie Cookieを設定するために使用しますが、この指定は非推奨です。代わりにHTTPヘッダーを利用すべきです。

HMTL5では、meta要素におけるname属性について以下の5つのキーワードが標準的な属性値として定義されています。指定した属性値の内容は、併記するcontent属性で記述します。

name属性値 役割
application-name 文書がWebアプリケーションを利用している場合に、アプリケーション名を記述するために指定します。１つの文書には1つだけ記述できます。
author 文書の著作者の名前を記述するために指定します。
description 文書の概要を記述するために指定します。検索エンジンのクローラーに読み取られ、検索結果などにも表示される情報です。１つの文書に1つだけ記述できます。
generator 文書がソフトウェアによって記述・作成されている場合に、ソフトウェア名を記述するために指定します。人の手によって作成された場合は必要ありません。
keywords 文書の内容を表すキーワードを記述するために指定します。content属性の値には、カンマ（,）区切りで複数のキーワードを入力できます。

name属性にrobotsを指定することで、検索エンジンのクローラーによるWebページのインデックスを拒否したり、Webページ内のリンク先を探索されないようにしたりできます。例えば、以下のようにcontent属性の値に、カンマ（,）で区切ってnoindex、nofollowを指定すると、この文書のWebページは、name="robots"の指定に対応した検索エンジンのクローラーからは内容を確認できなくなります。 iPhoneなどのスマートフォンやタブレット端末のブラウザーは、多くの場合、幅980pxでWebページを表示しようとします。name="viewport"を指定して、以下の表中のcontent属性の値と、役割となる数値またはキーワードをイコール（=）でつなげて指定することで、これらのブラウザーでのWebページの表示方法を制御できます。name="viewport"はiOSのSafariが実装した独自属性でしたが、現在では多くのブラウザーが対応しています。なお、Webページの表示に関わる内容であることから、今後はCSSの標準仕様となる予定で策定が進められています。

content属性値 役割
initial-scale Webページが最初に読み込まれたときの拡大・縮小率を指定します。初期状態ではWebページを端末画面に合わせます。指定できる値の範囲はminimum-scale、およびmaximum-scaleの値の範囲となります。
width 表示する幅を200px～10000pxの数値で指定します。初期値は980pxです。「device-width」を指定することで、端末の画面の幅を指定できます。
height 表示する高さを223px～10000pxの数値で指定します。「device-height」を指定することで、端末の画面の高さを指定できます。
user-scalable 閲覧者にWebページの拡大・縮小を許可するかをyes、noで指定します。初期値はyesとなっており、拡大・縮小が可能です。
minimum-scale 許可する拡大率の下限を0～10の数値で指定します。初期値は0.25です。
maximum-scale 許可する拡大率の上限を0～10の数値で指定します。初期値は1.6です。
以下の例では、width=device-widthを指定することで、端末の画面の幅に合わせて表示されます。同時に、Webページが表示される倍率は1を指定しています。

http-equiv属性にrefreshを指定すると、content属性の値で指定した形式で、Webページが更新、リダイレクトされます。ただし、閲覧者の意に反した強制的な再読み込みは避けましょう。また、リダイレクトについては、対応しない環境のために、リダイレクト先へのリンクも併せて表示するなどの配慮が必要です。

?
1
2
3
4

5-最後に

恐らくいっぱい記事があると思いますが書きました。
自分で書いている『htmlのサンプルコード』のurlリンクとして使いたいと思い、執筆しています。
まだ編集中ですが、良かったら見てみて下さい。☺