メタタグ自動生成
メタタグ自動作成ツール
[ Meta Tag Generator - メタタグを作ることができます ]

  《Webページ制作支援のページです》 - 使い方など 
 メタタグ(Meta Tag)は、Webページの要素や情報などを、ブラウザで見た際のページに表示させずに埋め込んでおくためのものです。言語の設定や、著作者、ページ内容の要約など様々な情報を書き込める他、検索エンジン対策[SEO]にキーワードや検索方法の指示なども書くことができます。
 <meta>タグは、必ず、<head> ~ </head> 間に記述します。

  • この『メタタグ自動生成ツール』では、メタタグを簡単に書き出すことができます。
  • ただし、ここにあるメタタグ全てを書く必要はありません。逆に、本文より前に多くの情報があると、検索エンジン対策の邪魔になることもあるということで、必要なのは  文字コード   タイトル   紹介・説明文   キーワード   のみとも言われます。その他は「全く必要なし」とする専門家もいます。
  • 検索エンジンで上位にリスティングさせたりするための、Webページの最適化(SEO=Search Engine Optimization=検索エンジン最適化)の一つとしては、タイトル   紹介・説明文   は必ず、また キーワード   も書くようにしましょう。
  • このページは、あれを使いたいと思った時に、その書き方のヒントが得られるよう、メタタグの一部をまとめたものです。(メタタグではないものも含まれています)

このページの使い方

  • 必要な項目を記入もしくは選択して、ページ最下部の枠に表示されるコードをコピーし、ご自身のHTMLの中にペーストしてください。<meta>タグの場合は、 <head> と </head> の間にペーストしてください。
  • 『ドキュメントタイプ』はページ先頭行に、『HTMLでの言語の明示』は<html>タグそのものの中に書きます。
  • このプログラムで書き出されるメタタグは、「XHTML 1.0」でのドキュメントタイプの宣言を前提にしています。
  • XHTMLでは、終了タグのない「meta」「link」「br」などの「空要素」では、タグの最後を「 /> 」で閉じる必要があります(HTMLではスラッシュ記号を付けず「 > 」で閉じる)。
  • しかし、HTML5では「 /> 」でも「 > 」でもよくなり、例えば、
    <meta charset="utf-8" /> と書いても、
    <meta charset="utf-8"> と書いてもよくなっています。
《設定する項目・目次》
ドキュメントタイプの定義 (DTD)  [HTML5での設定方法を含む] 
HTMLで言語明示 
文字コードの設定 
文字コードの設定  [HTML5] 
HTML5非対応ブラウザーへの対策 
言語 
タイトル 
紹介・説明文 
キーワード 
OGP 
Thumbnail 
JavaScriptを使う 
CSSを使う 
主題 
要約・抜粋 
著作者・制作者 
オーナー 
デザイナー 
出版者 
メールアドレス 
制作日 
著作権表示 
電話番号 
ファクス番号 
国番号 
制作ソフト 
ブラウザ用アイコン 
ナビゲーション start 
ナビゲーション next 
地理的エリア 
タグ適用範囲 
提供対象 
カテゴリ・分類 
Document Class 
対象年齢層 
検索ロボットへの指示 
ロボット保存 NO 
キャッシュ NO 
画像検索 NO 
画像リンク NO 
有効期限 
ロボット再巡回 
秒数指定ページ移動 
ページ再読み込み 
ツールバー非表示 
NO-ODP 
NO-YDIR 
外部CSS 
外部JavaScript 
<head>タグを書く 
ビューポートを設定 
外部CSS  [HTML5] 
外部JavaScript  [HTML5] 
Google Chromeで翻訳バーを非表示にする 
Google ニュースに掲載されないようにする 
Google ニュースと Google 検索に掲載されないようにする 
特定の時点の記事を削除するように Google に指示する 
・スマートフォン用などのブラウザーで、電話番号、メールアドレスの自動リンクをさせない設定。
※スマートフォンや iPadなどに向けたブラウザーで、電話番号や電話番号に似た数字、メールアドレスへの自動リンクが作成されてしまうのを禁止・解除します。
※実際にこのサイト内でも、度量衡のページの「357.9098」や、免許証のページ     での「500956789012」などの数字にリンクが張られてしまうということが起きました。(これらのページでは「<meta name="format-detection" content="telephone=no" />」の設定をしています)
ドキュメントタイプの定義 (DTD)  
  • ドキュメントタイプ = Document Type Definition <!DOCTYPE> は、ページの先頭行に記述し、そのHTMLファイルで使用しているHTMLバージョンを宣言します。メタタグではありません。
  • 「XHTML 1.0 トランジッショナル(Transitional)」を選択した場合、次のように書き出されます。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    ・「HTML5」では、 <!DOCTYPE html> と書き出されます。
    各タイプの詳しいことは、専門書やWeb上で「ドキュメントタイプ」で検索するなどしてお調べください。
HTMLでの言語の明示  
  • <HTML>には、LANG属性を使ってその文書の言語を明示しておくことが薦められています。<HTML>タグ内に、LANG属性を指定するようにしましょう。日本語を選択した場合、次のように書き出されます。
    <html lang="ja">
  • なお「ドキュメントタイプの定義」を選択した場合は、<html>タグも書き出されますので、その中に書くとよいでしょう。
    「HTML 4.01」「HTML 5」を宣言した場合は「lang="ja"」を記述し、<html lang="ja">となり、「XHTML 1.0」を宣言した場合は「xml:lang="ja" lang="ja"」を記述し、<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">となります。
Charset:文字コード  
  • 文字コードを設定すると文字化けを防げます。日本語を使う場合は、通常「シフトJIS日本語 = Shift_JIS」を設定しますが、ページで使うスクリプトやサーバーの設定などによっては、「EUC-JP」、「UTF-8」などの場合もあります。
  • ちなみに、無料ホームページサービス の「GeoCities」は「EUC-JP」です。 また、Google Maps APIを使って地図ページを作る場合などは「UTF-8」を設定します。文字コードは、<title>より 前に置きます。 『シフトJIS』を選択した場合、次のように書き出されます。
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
Charset:文字コード [ HTML5での設定 ]  
  • 「HTML5」での文字コードの設定・エンコーディングの書き方は、ドキュメントタイプの設定と同様、とてもシンプルになりました。『UTF-8』を選択した場合、次のように書き出されます。 文字コードは、<title>より 前に置きます。
    <meta charset="UTF-8" />
HTML5に対応していない、IE6〜IE8などのブラウザーへの対策  
・この「googlecode」の提供は終了しています。
  • HTML5でページを作った場合、HTML5の新要素に対応していない IE6 から IE8 では、新要素がレンダリングされずスタイルを適応することができないという問題が起こります。対策として、Remy Sharp氏が公開した『html5.js』というライブラリをインポートすることで解決できます。次のように書き出されます。
  • この「googlecode」の提供は終了しています。

  • <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  • このファイルは、ダウンロードしてご自分のサーバーに置くことが推奨されています。下記サイトからダウンロードし、ご自身のフォルダに格納し設置してください。
Language : 言語  
  • Webページで使う言語を設定します。日本語を選択した場合、次のように書き出されます。
    <meta http-equiv="content-language" content="ja" />
Title : タイトル  
  • タイトルは、ブラウザの最上部に表示されます。検索にヒットする条件にもなります。また、ブックマーク登録をした際の名前になります。検索エンジン対策としても、キーワードになりそうな言葉も含める工夫をして、ページ内容にあったタイトルを付けましょう。
  • 字数に制限はありませんが、ブラウザでの表示や、検索サイトでの検索結果の表示などを考えると、20文字程度(半角で40文字)を一応の目安とするのがよいようです。『みんなの知識 《ちょっと便利帳》 [メタタグ自動生成ツール]』と入力した場合、次のように書き
    出されます。 <title>みんなの知識 《ちょっと便利帳》 [メタタグ自動生成ツール]</title>
Description : 紹介・説明文  
  • Webページの紹介・説明文、つまり、ページの概要を書きます。多くの検索エンジンで検索結果として表示されます。字数は全角で 100 文字位が目安とされているようですが、このページの制作時点で、 infoseek では80字(160バイト)を超すとサイト登録ができません。『メタタグ自動生成ツールです。』と入力した場合、次のように書き出されます。
    <meta name="description" content="メタタグ自動生成ツールです。" />
Keywords : キーワード  
  • キーワードは半角カンマ","で区切ります。 キーワードは、多くても10個位までに、また、本文と関係のないキーワードや大量のキーワードを入れたり、 同じキーワードを何度も繰り返したりすると、検索エンジンからはじかれることもあるということです。『ちょっと便利帳,メタタグ,自動生成』と入力した場合、次のように書き出されます。
    <meta name="keywords" content="ちょっと便利帳,メタタグ,自動生成" />
  • OGPタグを設定する
  • OGPタグは、FacebookなどのSNSでシェアされた際に画像を表示したり、カード型で表示するためのタグ。シェアされた際のクリック率に大きく影響するため、SNSからの流入を獲得したい場合には設定。
OGP ページタイトル  
  • 当該ページのタイトルを記述。
    <meta property="og:title" content="みんなの知識 ちょっと便利帳 HOME" />
OGP ページタイプ  
  • トップページの場合 website、または blog、下層ページは article
    <meta property="og:type" content="website" />
OGP ページURL  
  • 当該ページのURL。絶対パスで指定。
    <meta property="og:url" content="https://www.benricho.org" />
OGP ページ概要  
  • 当該ページの概要として表示される説明文。
    <meta property="og:description" content="「ちょっと便利帳」は便利なサイトです。" />
OGP サイトタイトル  
  • 運営しているサイトのタイトル。
    <meta property="og:site_name" content="みんなの知識 ちょっと便利帳"/>
OGP 画像URL  
  • SNSでシェアされた場合に表示される画像。
  • 当該画像の格納場所を絶対パスで指定。
  • 画像を設定しない場合、ページ内で使用されている画像からランダムに画像が選ばれ表示される。
    <meta property="og:image" content="https://www.benricho.org/img/画像.jpg" />
Thumbnail 画像を設置する  
  • Thumbnail(サムネイル)画像は、検索結果や広告のレコメンドウィジェットなどに表示させるためのもの。
  • 当該 Thumbnail 画像の格納場所を絶対パスで指定。
    <meta name="thumbnail" content="https://www.benricho.org/img/画像.png" />
JavaScript を使う  
HTML5で書いた場合は必要がありません。
  • スクリプトを使用する場合は、 <meta> 内にまずベースとなるスクリプト言語を明示します。選択した場合、次のように書き出されます。
    <meta http-equiv="Content-Script-Type" content="text/JavaScript" />
    ・なお、HTML5ではJavaScript内の「type="text/javascript"」も省略することができて、<script type="text/javascript">は、<script>と書くことができます。
CSS を使う  
HTML5で書いた場合は必要がありません。
  • スタイルシートを使用する場合は、<meta> 内にまずベースとなるスタイル言語を明示します。選択した場合、次のように書き出されます。

    <meta http-equiv="Content-Style-Type" content="text/css" />

    ・なお、HTML5ではCSS内の「type="text/css"」も省略することができて、<style type="text/css">は、<style>と書くことができます。
Subject : 主題  
  • 何に関するWebページかなどを記入します。上の「紹介・説明文」や下の「要約・抜粋」ともダブルような場合は、「紹介・説明文」だけを記入すればよいでしょう。『メタタグ自動生成ツールです。』と入力した場合、次のように書き出されます。
    <meta name="subject" content="メタタグ自動生成ツールです。" />
Abstract : 要約・抜粋  
  • 「紹介・説明文」とほぼ同じ意味です。「紹介・説明文」と全く同じ文章を二重に入れているサイトもあります。『メタタグ自動生成ツールです。』と入力した場合、次のように書き出されます。
    <meta name="abstract" content="メタタグ自動生成ツールです。" />
Author : 著作者・制作者  
  • Webページの著者やWebページを開設している会社名などを記入します。『ちょっと便利帳』と入力した場合、次のように書き出されます。
    <meta name="author" content="ちょっと便利帳" />
Owner : オーナー  
  • Webページを開設している会社名などを記入します。Authorと使い分けをすることもできます。『ちょっと便利帳』と入力した場合、次のように書き出されます。
    <meta name="owner" content="ちょっと便利帳" />
Designer : デザイナー  
  • デザイナーが関わった際に記入します。Webmasterを記入することもあります。『MyName』と入力した場合、次のように書き出されます。
    <meta name="designer" content="MyName" />
Publisher : 出版者  
  • ウェブサイトで公開している資料などを販売している場合に、AuthorやOwnerの他に「出版者」として会社名などを記入します。『ちょっと便利帳』と入力した場合、次のように書き出されます。
    <meta name="pubrisher" content="ちょっと便利帳" />
Mail Address : メールアドレス  
  • Webページを開設している人や会社などのEメールアドレスです。必ずしも記入する必要はありません。記入する際は、迷惑メール対策として、「@マーク」を、「 %40 」 または 「 &#64; 」の記号にすることをお薦めします。『web***@***.jp』を『web***&#64;***.jp』と入力した場合、次のように書き出されます。
    <link rev="made" href="mailto:web***&#64;***.jp" />
Creation Date : 作成日  
  • ページの制作日を記入します。2004.11.10 や Novenbar 10, 2004 などと記入します。『Novenbar 10, 2004』と入力した場合、次のように書き出されます。
    <meta name="creation date" content="Novenbar 10, 2004" />
Copyright : 著作権表示  
  • AuthorやOwnerなどとダブってしまうこともありますが、公開しているサイトの所有者とは別の所に著作権がある場合や、ページを模倣されたりしないように著作権を特に強調する場合などに書いておくとよいでしょう。
  • 『Copyright (C) 2004 みんなの知識委員会』と入力した場合、次のように書き出されます。
    <meta name="copyright" content="Copyright (C) 2004 みんなの知識委員会 " />
Telephone : 電話番号  
  • 電話番号を記入します。『000-000-0000』と入力した場合、次のように書き出されます。
    <meta name="tel" scheme="000-000-0000" />
Facsimile : ファクス番号  
  • ファクシミリ番号を記入します。『000-000-0000』と入力した場合、次のように書き出されます。
    <meta name="fax" scheme="000-000-0000" />
Country Code : 国番号  
  • 国番号を記入します。日本は「81」です。『81』と入力した場合、次のように書き出されます。
    <meta name="country code" scheme="81" />   [リンク:国番号(KDDIのページ)]
Generater : ページ作成ソフト名  
  • ページを作成したソフトウエア(オーサリングソフト)を書いておくことができます。ただし、このメタタグは書かないことの方が多いようです。逆に、自動的に書き込まれてしまうソフトもあるので、このメタタグの削除を勧める専門家もいるようです。『**soft**』と入力した場合、次のように書き出されます。
    <meta name="generater" content="**soft**" />
Favicon : ブラウザ用アイコン  
  • ブラウザのアドレスバーに表示される小さいアイコンを設定することができます。アイコンを ルートディレクトリに「favicon.ico」の名前で保存した場合は、「favicon.ico」と記入してください。それ以外のフォルダに保存した場合は、http:// から始まる URL を記入するのが無難です。 アイコンは、別途作成する必要があります。フリーウエアのアイコン作成ソフトがウェブ上にあります。『favicon.ico』と入力した場合、次のように書き出されます。
    <link rel="shortcut icon" href="favicon.ico" />
    ちなみに、このサイトでは左のようなアイコンを使用しています。ブラウザのアドレスバーをご覧ください。(一部、表示されないブラウザがあります)
ナビゲーション用リンク[start]  
  • 検索エンジンに対して、最初に読んでもらいたいページを示します。通常は、TOPページのURLを記入します。『http://www.***.co.jp/』と入力した場合、次のように書き出されます。
    <link rel="start" href="http://www.***.co.jp/" />
ナビゲーション用リンク[next]  
  • ページが続く場合、このタグを設定すると「次」のページを先読みし、ダウンロード時間を節約することができます。『http://www.***.co.jp/***.html』と入力した場合、次のように書き出されます。
    <link rel="next" href="http://www.***.co.jp/***.html" />
Targeted Geographic Area : 地理的対象エリア  
  • Webページが対象とする地理的エリアを指定します。対象が日本国内であれば「Japan 」、アジアを対象にしていれば「Asia 」とします。『Japan』を選択した場合、次のように書き出されます。
    <meta name="Targted Geographic Area" content="Japan" />
Distribution : メタタグの適用対象範囲  
  • 他のメタタグが外部に対して指定されているのか、内部に対して指定されているのかを表します。通常、トップページや主なページに対して「 Global 」を、その他のページには「 Local 」を割り当てます。検索ロボットにすべてのページを検索させたければ「 Global 」で指定してもかまいません。『Global』を選択した場合、次のように書き出されます。
    <meta name="distribution" content="Global" />
Coverage : サービス提供対象  
  • ウェブサイトで扱っている商品やサービスについて、提供する対象範囲を指定します。対象が日本国内であれば「Japan 」、世界中の国々を対象にしていれば「 worldwide 」とします。『Japan』を選択した場合、次のように書き出されます。
    <meta name="coverage" content="Japan" />
Classification : カテゴリ・分類  
  • Webページのカテゴリを指定します。多くの検索エンジンが、Webページの分類にこのタグを使用します。例えば、「インターネット」と指定すれば、「インターネット」のカテゴリーにあなたのサイトは分類されます。『インターネット』と入力した場合、次のように書き出されます。
    <meta name="classification" content="インターネット" />
Document Class  
  • 文書が完成しているのか、制作中か、出版されているのかなどを記述します。 「Completed」「Draft」「Living Document」「Published」など。『Completed』を選択した場合、次のように書き出されます。 <meta name="doc-class" content="Completed" />
Rating : 対象年齢層  
  • 見てもらいたい年齢層を指定します。すべての年齢層を対象とすれば、「General」もしくは「All Ages」を、子どもに特に見てもらいたいページでは、「Safe For Kids」もしくは「Child」を設定することもできます。『一般』を選択した場合、次のように書き出されます。
    <meta name="rating" content="General" />
Robots : 検索ロボットへの指示  
  • 通常は、特に設定する必要はないようですが、設定するとすれば「INDEX,FOLLOW」を選びます。
  • ロボットに検索をさせない、つまり、ウェブ上であなたのページを検索して欲しくない場合は、「NOINDEX,NOFOLLOW」をお選びください。ただし、絶対に有効という保証はないようです。『INDEX,FOLLOW』を選択した場合、次のように書き出されます。
    <meta name="robots" content="INDEX,FOLLOW" />
    [指示内容の説明]
    ・INDEX,FOLLOW : すべてのページの検索を許可。 [ALL]も同じ意味です。
    ・INDEX,NOFOLLOW : 当該ページのみ検索を許可、他ページは不許可。
    ・NOINDEX,FOLLOW : 当該ページの検索を不許可、他ページは許可。
    ・NOINDEX,NOFOLLOW : すべてのページの検索を不許可。 [NONE]も同じ意味です。
No Archive : 保存させない  
  • 検索ロボットに、ページを保存(アーカイブ)させないようにします。頻繁に更新するサイトでは、ロボットがクロールした時点の古い情報を残さないようにするため使います。選択した場合、次のように書き出されます。
    <meta name="robots" content="NOARCHIVE" />
Pragma : キャッシュさせない  
  • ブラウザにページをキャッシュさせないようにします。 アクセスする度に最新のページを見てもらうことができます。選択した場合、次のように書き出されます。
    <meta http-equiv="pragma" content="no-cache" />
No Image Index : 画像を検索させない  
  • ページ内の画像が検索対象にならないようにします。選択した場合、次のように書き出されます。
    <meta name="robots" content="NOIMAGEINDEX" />
No Image Click : 画像へリンクさせない  
  • ページ内の画像への直接リンクができないようにします。選択した場合、次のように書き出されます。
    <meta name="robots" content="NOIMAGECLICK" />
Expires : 有効期限  
  • ブラウザからページのキャッシュを消去する日時を指定します。ブラウザによって対応が異なるので必ずしも有効とは言えません。あまり使用されないタグです。「 Wed, 10 Nov 2004 22:10:30 JST 」や、「 Novenbar 10, 2004 」などと記入します。『Novenbar 10, 2004』と入力した場合、次のように書き出されます。
    <meta name="expires" content="Novenbar 10, 2004" />
Revisit-After : ロボット再巡回  
  • 自動巡回ロボットが訪れた際に、再度、何日後にまた訪問して欲しいと命令します。数字を入力します。ただし、最近はロボットが頻繁に巡回しているので、特に設定する必要はないでしょう。『5』と入力した場合、次のように書き出されます。
    <meta name="revisit-after" content="5 days" />
Refresh : 秒数指定でページ移動
  秒数  
  URL 
  • 秒数を指定して、自動的に別のページへ移動させることができます。
  • 移動させるまでの秒数と、移動先のページのURLを入力します。
    [入力例] 秒数: URL: http://www.***.com/  と入力すると、次のように書き出されます。
    <meta http-equiv="refresh" content="5;URL=http://www.***.com/" />
    このコードは5秒に設定した例です。瞬時に移動させる場合は「0」、10秒後に移動させる場合は「10」などと入力します。
Refresh : 秒数指定で再読み込み   
  • 短時間に、更新を頻繁に行う場合などに設定します。スポーツの結果などをリアルタイムで見てもらう時などに、ユーザーがページを更新しなくても、ブラウザ側が自動的に指定した秒数でそのページを更新します。秒数を入力します。『30』と入力した場合、次のように書き出されます。
    <meta http-equiv="refresh" content="30" />
No Image Toolbar : ツールバーを表示させない  
  • Internet Explorer6.0以降で、200×200ピクセル以上の画像にカーソルを乗せると「イメージツールバー」といわれる画像が出ます。ここでは、その「イメージツールバー」を出さないように設定することができます。これを選択した場合、次のように書き出されます。
    <meta http-equiv="imagetoolbar" content="no" />
    この「ツールバー」は、便利な反面、サイトの性格によっては邪魔になることもあります。

    ※上記の設定をした場合、全ての画像に適用されますが、画像ごとに個別に指定することもできます。
    ●上記の設定をしたが、特定の画像には「表示させる」…イメージタグの中に「galleryimg="yes"」を書く。("yes"は、"true"でも可)
    《例》<img src="ファイル名" galleryimg="yes" />
    ●上記の設定をせずに、特定の画像にのみ「表示させない」…イメージタグの中に「galleryimg="no"」を書く。("no"は、"false"でも可)
    《例》<img src="ファイル名" galleryimg="no" />

    ※ユーザー側で設定することもできます。
    〔1〕イメージツールバーを右クリックし、表示されたメッセージに従って「無効」にする。
    〔2〕[ツール]→[インターネットオプション]→[詳細設定]を開き設定する。

NOODP:DMOZデータ、Yahoo!カテゴリデータを検索結果に表示させない
  • 検索結果に、DMOZ (ODP, Open Directory Project)やYahoo!カテゴリデータに登録されているデータを表示させないようにします。
  • 登録されているデータが、現在のサイトを表す内容として適切な場合は問題ありませんが、制作者の意図する内容になっていない場合、そのデータを表示させず、ページに書かれた説明文などを表示させるようにします。
検索エンジン3社にDMOZデータ、Yahoo!カテゴリデータを表示させない
  
  • 検索エンジン3社(Yahoo,Google,MSN)の結果に、DMOZやYahoo!カテゴリのデータを表示させないようにします。選択した場合、次のように書き出されます。
    <meta name="robots" content="NOODP" />

Yahoo!検索の結果にのみDMOZデータ、Yahoo!カテゴリデータを表示させない
  
  • Yahoo!検索の結果にのみ、DMOZやYahoo!カテゴリのデータを表示させないようにします。選択した場合、次のように書き出されます。
    <meta name="Slurp" content="NOODP" />
NOYDIR:Yahoo!カテゴリデータを検索結果に表示させない  
  • Yahoo!検索の結果に、Yahoo!カテゴリに登録されているデータを表示させないようにします。
  • 登録されているデータが、現在のサイトを表す内容として適切な場合は問題ありませんが、制作者の意図する内容になっていない場合、そのデータを表示させず、ページに書かれた説明文などを表示させるようにします。選択した場合、次のように書き出されます。
    <meta name="robots" content="NOYDIR" />
外部CSSを読み込む  
  • 使用するCSSを当該文書の中に書かずに、CSSファイルとして外部に保存した場合、そのファイルを読み込む(リンクさせる)ためのコードです。外部に置いたCSSファイルの拡張子は、「***.css」となりますので、読み込むCSSファイル名を、「.css」まで入力してください。例えば「css」というフォルダに保存したとして、『css/***.css』と入力した場合、次のように書き出されます。
    <link type="text/css" rel="stylesheet" href="css/***.css" />

    ・HTML5では、「type="text/css"」を省略することができます。

  • 外部CSSと外部JavaScriptがある場合、外部CSSを読み込むタグをJavaScriptを読み込むタグよりも先に記述することで、ページの表示速度を高速化することができます。
    《CSSとJavaScriptの記述順番の例》
    <link type="text/css" rel="stylesheet" href="css/test.css" />
    <script type="text/JavaScript" src="js/test.js"></script>
外部CSSを読み込む [ HTML5 で]   
  • 外部CSSを読み込むための、HTML5 での記述方法です。
  • 上記の記述方法から、「type="text/css"」を省略しています。『css/***.css』と入力した場合、次のように書き出されます。
    <link rel="stylesheet" href="css/***.css" />

  • 外部CSSと外部JavaScriptがある場合、外部CSSを読み込むタグをJavaScriptを読み込むタグよりも先に記述することで、ページの表示速度を高速化することができます。
    《CSSとJavaScriptの記述順番の例》
    <link rel="stylesheet" href="css/test.css" />
    <script src="js/test.js"></script>
外部JavaScriptを読み込む   
  • 使用するJavaScriptを当該文書の中に書かずに、JavaScriptファイルとして外部に保存した場合、そのファイルを読み込む(リンクさせる)ためのコードです。外部に置いたJavaScriptファイルの拡張子は、「***.js」となりますので、読み込むJavaScriptファイル名を、「.js」まで入力してください。例えば「js」というフォルダに保存したとして、『js/***.js』と入力した場合、次のように書き出されます。
    <script type="text/JavaScript" src="js/***.js"></script>

    ・HTML5では、「type="text/JavaScript"」を省略することができます。

  • 外部CSSもある場合、外部CSSを読み込むタグをJavaScriptを読み込むタグよりも先に記述することで、ページの表示速度を高速化することができます。
    《CSSとJavaScriptの記述順番の例》
    <link type="text/css" rel="stylesheet" href="css/test.css" />
    <script type="text/JavaScript" src="js/test.js"></script>
外部JavaScriptを読み込む [ HTML5 で]   
  • 外部JavaScriptを読み込むための、HTML5 での記述方法です。
  • 上記の記述方法から、「type="text/JavaScript"」を省略しています。『js/***.js』と入力した場合、次のように書き出されます。

  • <script src="js/***.js"></script>

  • 外部CSSもある場合、外部CSSを読み込むタグをJavaScriptを読み込むタグよりも先に記述することで、ページの表示速度を高速化することができます。
    《CSSとJavaScriptの記述順番の例》
    <link rel="stylesheet" href="css/test.css" />
    <script src="js/test.js"></script>
スマートフォンや iPadなどで電話番号にリンクさせない  
  • ページ内に、電話番号や電話番号に似た数字(357.9098 など)が記載されていると、スマートフォンや iPadなどに向けて作られたブラウザーでは自動的にリンクが作成されてしまうことがあります。
  • 電話番号にリンクさせないようにします。
    <meta name="format-detection" content="telephone=no" />
スマートフォンや iPadなどでメールアドレスにリンクさせない  
  • ページ内に、メールアドレスが記載されていると、スマートフォンや iPadなどに向けて作られたブラウザーでは自動的にリンクが作成されてしまうことがあります。
  • メールアドレスにリンクさせないようにします。
    <meta name="format-detection" content="email=no" />
スマートフォンや iPadなどで電話番号・メールアドレス双方にリンクさせない  
  • ページ内に、電話番号や電話番号に似た数字(357.9098 など)、メールアドレスが記載されていると、スマートフォンや iPadなどに向けて作られたブラウザーでは自動的にリンクが作成されてしまうことがあります。
  • 電話番号・メールアドレス双方にリンクさせないようにします。
    <meta name="format-detection" content="telephone=no,email=no" />
携帯端末でのウェブページの表示方法を制御するビューポートを設定する  
  • ビューポートは携帯端末でのウェブページの表示方法を制御します。
  • ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。ビューポートを設定すると、ページの幅やさまざまな端末での拡大縮小を制御できるようになります。
  • なお、このメタタグに「minimum-scale、maximum-scale、user-scalable」などの情報を入れて、ズームを設定したり、ビューポートをズームする機能を完全に無効にしたりすることができますが、これらはアクセシビリティに悪影響を与えるとして、Googleでは推奨されていません。
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
Google Chromeで翻訳バーを非表示にする  
  • ブラウザーに「Google Chrome」を使っている場合、設定している「言語」と異なる言語のページにアクセスすると「翻訳ツールバー」が表示されることがあります。
  • これを、メタタグを書くことによって特定のページのみで非表示にすることができます。選択した場合、次のように書き出されます。
    <meta name="google" content="notranslate" />

    「Google Chrome」で表示される「翻訳ツールバー」

※このツールバーは、ブラウザー上の設定で非表示にすることもできます。
Google ニュースに掲載されないようにする  
  • サイト内の特定の記事が Google ニュースに掲載されないようにします。
  • このメタタグを書くことによって Googlebot-News によるアクセスをブロックします。選択した場合、次のように書き出されます。
    <meta name="Googlebot-News" content="noindex, nofollow" />
Google ニュースと Google 検索に掲載されないようにする  
  • サイト内の特定の記事が Google ニュースと Google 検索に掲載されないようにします。
  • このメタタグを書くことによって Googlebot によるアクセスをブロックします。選択した場合、次のように書き出されます。
    <meta name="googlebot" content="noindex, nofollow" />
特定の時点の記事を削除するように Google に指示する  
  • 特定の時点の Google インデックスから記事を削除するように Google に指示します。
  • 削除を指示する年・月・日・時間を指定します。
  • 該当するページが検索結果に表示されなくなるのは、インデックスより削除されてから約 1 日後です。ただし、タグを正常に機能させるには、記事が最初にクロールされる時点でこのタグが記事に追加されている必要があります(Google による説明)。
    [入力例]  25-Aug-2020 15:00:00 JST   と入力すると、次のように書き出されます。
     JST は日本標準時です。
    <meta name="googlebot" content="unavailable_after: 25-Aug-2020 15:00:00 JST" />
    クリックして、
    月の略称をコピーすることができます。
    1月
    Jan
    2月
    Feb
    3月
    Mar
    4月
    Apr
    5月
    May
    6月
    Jun
    7月
    Jul
    8月
    Aug
    9月
    Sep
    10月
    Oct
    11月
    Nov
    12月
    Dec
ヘッドダグ <head></head> を書く
  開始;
  終了:
  • メタタグではありませんが、ここでヘッドタグ(<head>)を書き出すことができます。
  • ドキュメントタイプの定義を設定し、ヘッドの「開始」と「終了」を選択すると、ボディタグ(<body>)の前に書くべき必要なコードが、必要な順序で全て書き出せます。


  

おすすめサイト・関連サイト…

Last updated : 2024/06/29