ウェブサイトの見出しデザインとして、英語と日本語を併記したものは、よく見かける形式の一つです。シンプルでありながら適度に見た目の情報量が増え、単調さがなくなるため、多用されるデザインです。

日本語と英語が併記された見出しの例

しかし、この英語と日本語を併記した見出し、マークアップの観点からいうと、なかなかの曲者です。今回は、この見出しについて、私が過去に使用していたマークアップと、現在使用しているマークアップについてご紹介したいと思います。

過去に使用していたマークアップ その1

一番最初に使用していたマークアップです。見出し内に併記した英語と日本語をそれぞれ<span>で囲んだシンプルなものでした。

<h2>
  <span class="en">ACCESS</span>
  <span class="jp">アクセス</span>
</h2>

しかし、この方法はいくつか問題点がありました。

  • 検索エンジンで英語と日本語両方の見出しが認識される。
  • スクリーンリーダーによる読み上げが考慮されていない。

要するに、機械からすると主従関係がなく、まとめて 1 つの見出しと判断されてしまうということです。

Google の検索エンジンでは、<title>タグが適切でないと判断された場合、検索結果のタイトルがページ内の見出しから選ばれることがあります。その際、日本語と英語を併記した見出しを使用していると、「ACCESS アクセス」のように不自然なタイトルになってしまう場合があり、SEO 的に良くないと判断し使用をやめました。

過去に使用していたマークアップ その2

上の反省を踏まえて、次に使用していたのがこのマークアップです。

<hgroup>
  <h2>アクセス</h2>
  <p>ACCESS</p>
</hgroup>

主従関係がはっきりした分、SEO の観点ではマシになったと思いますが、やはりスクリーンリーダーでは同じ意味のものが 2 度読まれることに変わりはありません。また、単なる補足情報である英語が<p>タグというのも少し違和感があります（<span>タグもよぎりましたが、それはそれでおかしいです）。

あと、英語が上にくるデザインの場合はdisplay: flex;とorderを使って並び替えが必要だったり、当時は<hgroup>タグの立ち位置が HTML の仕様的に微妙だったこともあり、この方法も次第に使わなくなっていきました。

現在使用しているマークアップ

そして、これが現在使用しているマークアップです。

<h2 data-en="ACCESS">アクセス</h2>
h2 {
  text-align: center;
  font-size: 30px;
}

h2:before {
  content: attr(data-en);
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #2379D1;
}

この方法を使用した実際の表示がこちらです。

See the Pen Untitled by YUTSUZO (@YUTSUZO) on CodePen.

英語の方はあくまで装飾的な扱いにし、data属性の値を擬似要素で取得して表示させるというものです。この方法であれば日本語のみがテキスト情報として扱われ、検索エンジンでもスクリーンリーダーでも問題ありません。

一つ難点があるとすれば、疑似要素を一つ消費してしまうので、beforeとafterを二つ使用しなければ実現できないようなデザインでは使用が難しいところでしょうか。

それ以外のマークアップ

実際に使用したことはありませんが、このようなマークアップもありかもしれません。

<h1>
  <span lang="ja">アクセス</span> /
  <span lang="en" aria-hidden="true">ACCESS</span>
</h1>

一番最初の例に似ていますが、aria-hidden属性を使用することでスクリーンリーダーの読み上げから除外しています。検索エンジンでの扱いについては未検証ですが、悪くないかもしれません。

終わりに

よく見かけるデザインですが、組むとなるとなかなか悩ましいデザインですよね。実際、検索してみると、どのようにマークアップすべきか悩まれている方は多いようです。ぜひ参考にしてみてください。