metaタグとは

WEBページには

  • 閲覧者に向けての記述
  • 検索エンジンやブラウザなど機械に向けての記述

が存在します。

 

metaタグは機械に向けての記述となり、

ページの表示やSEOに重大な役割を果たします。

 

metaタグはどのようなものかを説明したいと思います。

metaタグとは

検索エンジン(Googleなど)に向けて、 ページの内容や情報を簡潔に示すものです。

基本的には閲覧者にこの情報は見えません。


決められた形式に則って情報などを書くことで、

  • どのようなページか
  • スマホの時はどのように表示したいか
  • シェアしてもらった時の画像

など様々なことを思い通りに決められます。

そもそもmetaとは何か?

「メタ」と読み、 メタデータやメタ情報など、 メタ〇〇と使われることが多い。

〇〇についてのデータ(検索エンジン向け)

という意味で考えても大丈夫です。

 

メタデータ : データについてのデータ

 

例) ブログ記事の場合 このブログ記事についてのデータ

  • タイトル
  • 説明文
  • 著者
  • Webサイトの表示形式
  • 文字コード など

 

Wikipediaにはこのように書かれています。

meta要素(めたようそ)とは、 一般に、ウェブページを記述するHTMLにおいて、 ページを記述する文字コードや、 そのコンテンツに関する著者や期限やキーワードといった、 メタデータを表現するHTML要素である。 Wikipedia – meta要素より引用

metaタグの使い方

基本的に<head>タグ内に書くこととなっています。

<!DOCTYPE html>
<html lang="jp">
  <head>
    ここにメタデータを記述します。(検索エンジンやブラウザに向けて記述する項目です)
  </head>
  <body>
    本文などコンテンツ部分を記述します。(閲覧者に向けて記述する項目です)
  </body>
</html>

 

良く使われるmetaタグ

title

<title>...</title>

ページタイトルを示すタグです。

全ページ必須の項目になります。

base

<base href="URL">

ベースURLを示すためのタグです。

これを設定しておくとファイルを読み込む時の記述が短縮され便利です。

 

【設定しない場合】

<link rel="stylesheet" href="https://pursuing.site/css/top.css">
<script src="https://pursuing.site/js/top.js"></script>

【設定する場合】

<base href="https://pursuing.site">
<link rel="stylesheet" href="css/top.css">
<script src="js/top.js"></script>

 

link

<link rel="リンクの種類" href="URL">

外部リソースのURLを明示できます。

<link rel="stylesheet" href="https://pursuing.site/css/top.css">

上記はCSSを読み込むための記述になります。

<link rel="icon" href="favicon.ico">

faviconを設定する為の記述です。

faviconは色々なところに使用されますがブラウザのタブに表示されるのが一番よく見ます。

<link rel="apple-touch-icon" href="smartphone.png">

iOSのsafariではデスクトップにサイトショートカットを配置することが出来ます。

その時に表示されるのがapple-touch-iconとなります。

 

style

<style>...</style>

htmlファイルに直接cssを書き込むことができます。

外部ファイルを使わない場合などに有効な対応です。

【使用例】

<style>
  p { 
    font-size: 150%;
  }
</style>

 

script

<script src="URL"></script>
<script>...</script>

JavaScriptを読み込むか記述する為のタグです。

<script src="js/top.js"></script>

これは外部ファイルのJavaScriptを読み込む記述です。

 

直接書き込む場合は

<script> alert('テスト'); </script>

となります。

 

meta

<meta>

上記で紹介したような

独自のタグがある情報(<title>, <base> など)以外の情報を

明示できるタグになります。

【使用できる属性】

  • <meta charset=”~”>
  • <meta name=”~” content=”~”>
  • <meta http-equiv=”~” content=”~”>
  • <meta property=”~”>

charset属性

エンコード(文字コード)の種類について明示します。

 

2021年現在ではUTF-8が主流ですので

<meta charset="UTF-8">

と記述することが多いです。

 

name属性

著者名やページの概要などを明示します。

 

【よく使用されるname属性】

auhor : ページの著者名

<meta name="auhor" content="著者名">

 

 

description : ページの概要

<meta name="description" content="WEBページに必要なmetaタグについて説明しています。metaとは何か、記述できるmetaタグは何があるかなど使い方も紹介します。">

 

 

viewport : ビューポートの設定

<meta name="viewport" content="~">

スマホやタブレットでページを表示した時、

どのような表示にするかを指定します。

contentの値をwidth=750などと指定すると

スマホ画面を750pxの幅と見立てて表示されます。

上記の場合だとタブレットでは文字などが

かなり大きく表示されてしまうことになるので下記の記述が一般的です。

<meta name="viewport" content="width=device-width,initial-scale=1">

initial-scale=1とは古いiOSに対応するための記述です。

様々な環境からアクセスされることを見越して

設定しておいた方が良さそうですね。


robots : 検索エンジンへの指示

このページを検索結果に表示させたくない場合や

ページをキャッシュしないで欲しい場合に有効です。

<meta name="robots" content="noindex,noarchive">

デザインテストの為だけに作成した記事など

閲覧者の利益にならないページはnoindexをつける方が良いとされています。

property属性

SNSなどでシェアされた時の表示設定を明示します。

<meta property="og:title" content="metaタグについて|mgkblog">
<meta property="og:type" content="article">
<meta property="og:url" content="https://pursuing.site/web/○○.html">
<meta property="og:image" content="//pursuing.site/web/img/ogp_noimage.png">
<meta property="og:description" content="WEBページに必要なmetaタグについて説明しています。metaとは何か、記述できるmetaタグは何があるかなど使い方も紹介します。">

 

metaタグに関するまとめ

metaタグは、普段あまり意識しない部分ばかりに関係のあるタグになります。

ただこれを意識して慎重に設定することで、SEOで検索順位が上がったり、シェアされた際の見た目が良くなったりと得することが多くあるので覚えていた方が良さそうです。