【HTML】aタグへのname属性はもうやめよう。ページ内リンクも動かず、AMPエラーが出る。

2018年1月24日

HTMLイメージ

少し古いHTML知識をお持ちの方だと、ページ内リンクのaタグへid属性と一緒にname属性を入れる方も多いでしょう。

ブランクのあるコーダーに気をつけていただきたいのですが、HTML5ではaタグへのname属性は非推奨となっており、Firefoxなどモダンブラウザではすでに動作しなくなっています。

すでに入れているname属性はid属性に入れ替えよう

現在、ページ内リンクのタグを書くとき、アンカー地点の主流はid属性です。name属性で書いたタグはどんどんidに置き換えてしまいましょう。

1ページにつき二つ存在してはいけないid属性はページ内リンクにピッタリです。

id属性とname属性を一緒に入れているのもNG

いま現在でもページ内リンクのアンカー地点としてタグにid属性とname属性を両方書いているページもたくさん存在しています。

両方あればid属性にひっかかるのでページ内リンクとしては問題なく動作します。

が、id属性と併記でもname属性は消してしまった方が良いです。そして今後は一切使わない方が無難です。

一応、HTML5でaタグへのname属性は非推奨ながら、指定値がカラでなければ警告のみでエラーは出ません。(name属性値とid属性値が一致している必要はあります)

ただし、いま現在GoogleがTwitterとともに推し進めているAMPではname属性がNGのため、AMPエラーとなってしまいます。

AMPはAccelerated Mobile Pagesの略で、要はスマホなどモバイル環境でもページをサクッと読み込めるようAMP専用のタグを使いましょう~ってなもの。

Googleが推しているくらいですから、今後AMPもSSL化(アドレスのhttps化)同様SEOに大きな影響を与え、検索順位で優遇されるようになっていくでしょう。

そもそもGoogleは表示速度が速いページが大好きですし。

特にWordPressで作ったブログやページではあとからでもAMP対応のテーマに切り替えたりプラグインを入れるだけで簡単にAMP対応できます。

が、aタグにname属性が入っているとAMPエラーによりそのページはSEO恩恵を受けられないのです。

まだまだAMPは走りだしたばかりですが、将来のことを考えて今の内から準備しておいた方が良いでしょう。

name属性を使ってはいけない理由 まとめ

  • HTML5ではaタグのname属性は非推奨となっており、すでにモダンブラウザではページ内リンクには使用できないものも。
  • aタグにname属性が存在するページはAMPエラーとなってしまうため、サイトをAMPに対応してもSEO恩恵を受けることができない。