online class text for web and video

webcordingカテゴリーの共通アイキャッチ画像

ファビコン・metaタグ・robots.txt

ファビコン

ファビコンとは、「Favorite（お気に入り） Icon」の略で、Webサイトのシンボルマークとして用いられる小さなアイコンのことです。
ブラウザのタブやブックマーク、履歴などに表示され、ユーザーが閲覧しているWebサイトを識別するのに役立ちます。

ファビコンのフォーマットは、「.ico」「.png」「.svg」「.gif」の4種類です。
しかし、「.png」「.gif」「.svg」はブラウザによって対応できないことがあるため、「.ico」を使用する事が一般的です。
ファビコンは目的や用途に合わせて、複数のサイズを作成することがあります。

ファビコンのサイズ

サイズ用途
16px×16pxChrome,Edge,Firefox,Safariなどブラウザのタブ
32px×32pxブックマークのアイコン
48px×48pxWindowsホーム画面のサイトアイコン
64px×64px高解像度のWindowsのホームページアイコン
180px×180pxAndroid,iOSなどのスマホのホーム画面アイコン
ファビコンのサイズ一覧

metaタグとは

<head>要素内に記述されるタグのことで、ブラウザや検索エンジンにWebページに関する情報（メタデータ）を伝える役割です。
metaタグは、ユーザーには直接表示されませんが、ブラウザの表示や検索エンジンの評価に影響を与える重要な要素です。

metaタグ一覧

metaタグ要不要
<meta charset=”UTF-8″>文字エンコーディングの指定。現在の標準はUTF-8です。 必須
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>デバイスの幅に合わせて表示を調整し、初期ズームレベルを1.0に設定します。必須
<meta property=”og:title” content=”ページのタイトル”>SNSの共有時に表示されるタイトル。通常はページタイトルと同じ。推奨
<meta property=”og:description” content=”ページの概要文”>SNSの共有時に表示されるページの概要文。推奨
<meta property=”og:image” content=”画像のURL”>SNSの共有時に表示される画像のURL。相対パスではなくhttpやhttpsから始まるフルパスで設定します。推奨
<meta name=”twitter:card” content=”summary_large_imageなど”>Twitterでの表示形式を指定します。大きな画像付きカードを指定する場合に使用します。推奨
<meta name=”description” content=”ページの概要文”>検索結果に表示されるページの概要文。推奨
<meta name=”keywords” content=”キーワード1, 2, 3,4,5″>以前はSEOで重要視されていましたが、現在は設定する必要がないとされています。
主要metaタグ一覧

テストサイトなど、検索サイトに登録したくない場合は推奨タグを設定せずに<meta name="robots" content="noindex, nofollow, noarchive">で検索除けをします。
この設定は有効ですが、確実ではなく、無視される事もあります。

robots.txtとは

robots.txt（ロボッツ・テキスト）は、検索エンジンのクローラー（ロボット）に対して、サイトのクロールやインデックスの設定を指示したり、どのページをクロールしてよいかを指示するテキストファイルです。robots.txtは必須ではありませんが、設置が推奨されています。

robots.txtの役割

  • クロールを許可するページと許可しないページを指定する
  • サイトマップの場所を伝える
  • クローラーのアクセス頻度を制限する

robots.txtの書式

全て記述しなければいけない訳ではなく、必要な項目のみを記述します。

User-agent: *
Disallow: /admin/
Allow: /images/

Sitemap: https://www.example.com/sitemap.xml

Crawl-delay: 10
  • User-agent（必須）: どのクローラーに対して指示を出すかを指定します。「User-agent: *」を指定すると、全てのクローラを対象としたルールになります
ユーザーエージェント説明
User-agent: *すべてのクローラを対象とします
User-agent: GooglebotGoogle検索のクローラを対象とします
User-agent: Yahoo!SlurpYahoo!検索のクローラを対象とします
User-agent:Y!JYahoo!Japan検索のクローラを対象します
User-agent: bingbotBing検索のクローラを対象します
User-agent: msnbotMSN検索のクローラを対象します
User-agent:TwitterbotTwitter検索のクローラを対象します
User-agent:facebookexternalhitFacebook検索のクローラを対象します
User-agent:Baidu中国の百度検索のクローラを対象します
User-agent:YandexBotロシアのYandex検索のクローラを対象します
主なUser-agent

関連URL

  • Disallow（任意）: クロールをブロックするディレクトリやページを指定します。
記述例説明
Disallow: /すべてのURLを拒否します
Disallow: /admin//admin/ ディレクトリ以下のURLを拒否し、それ以外を許可します
  • Allow（任意）: 特定のページのクロールを許可します。Disallowによりブロックしているディレクトリの一部をクロールさせたい時などに使用します。
  • Sitemap（任意）: クローラーの巡回をサポートするためにサイトマップの場所を指定します。
  • Crawl-delay（Googleなどが無視している事が判明）: クローラーがページにアクセスする間隔を秒単位で指定します。

robots.txtの注意点

  • robots.txtは、クローラーに指示を出すためのファイルであり、検索結果に直接影響を与えるものではありません。
  • robots.txtでクロールを許可しないページを指定しても、そのページが検索結果から完全に削除されるわけではありません。

robots.txtが機能しているかはGoogle Search Consoleで確認する事ができます。

PAGE TOP