HTML、microdata、schema.orgを用いた電話番号のマークアップ

2024-04-11

電話番号のマークアップ方法：HTML、マークアップ、URLスキーム

HTMLでは、tel属性を持つinput要素を使用して電話番号をマークアップできます。

<input type="tel" name="phone_number" value="03-1234-5678">

このコードは、ユーザーに電話番号を入力するためのテキストボックスを表示します。

マークアップ

電話番号をより詳細にマークアップするには、microdataやschema.orgなどの構造化データを使用できます。

microdata

<p itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">株式会社例</span>
  <span itemprop="telephone">03-1234-5678</span>
</p>

このコードは、株式会社例という組織の電話番号が03-1234-5678であることを示します。

schema.org

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "株式会社例",
  "telephone": "03-1234-5678"
}
</script>

URLスキーム

tel URLスキームを使用して、電話番号へのリンクを作成できます。

<a href="tel:03-1234-5678">03-1234-5678</a>

このコードは、ユーザーがクリックすると電話アプリが起動し、03-1234-5678に自動的に発信されるリンクを作成します。

まとめ

電話番号をマークアップすることで、検索エンジンやユーザーエージェントが電話番号を認識しやすくなります。また、ユーザーが簡単にクリックして発信できるようにすることができます。

電話番号のフォーマットは、国や地域によって異なります。日本の場合は、ハイフンなしで0312345678のように記述します。
国際電話番号の場合は、国番号を含めて記述する必要があります。日本の場合は、+81312345678のように記述します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>電話番号のマークアップ</title>
</head>
<body>
  <h1>株式会社例</h1>
  <p>電話番号：<a href="tel:03-1234-5678">03-1234-5678</a></p>
  <p>
    <input type="tel" name="phone_number" value="03-1234-5678">
  </p>
  <p itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">株式会社例</span>
    <span itemprop="telephone">03-1234-5678</span>
  </p>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "株式会社例",
    "telephone": "03-1234-5678"
  }
  </script>
</body>
</html>

株式会社例の電話番号：03-1234-5678
電話番号を入力するためのテキストボックス
microdataを使用した電話番号のマークアップ

実行方法

上記のコードをindex.htmlなどのファイル名で保存します。
ブラウザでファイルを開きます。

確認方法

ブラウザの開発者ツールを使用して、microdataやschema.orgのマークアップが正しく認識されていることを確認できます。

電話番号のマークアップ方法：その他の方法

CSSを使用して、電話番号の見た目を変更することができます。

a[href^="tel:"] {
  color: blue;
  text-decoration: underline;
}

このコードは、電話番号へのリンクを青色で下線付きで表示します。

JavaScriptを使用して、電話番号をクリックしたときの動作をカスタマイズすることができます。

document.querySelectorAll('a[href^="tel:"]').forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    // 電話アプリを起動する処理
  });
});

このコードは、電話番号へのリンクをクリックすると、電話アプリが起動するようにします。

電話番号をマークアップするには、さまざまな方法があります。目的に合った方法を選択してください。

html markup url-scheme