id要素が複数でもペナルティはない？

Question

以前は同一ページ内にid要素は必ず一意でなければいけませんでしたが、最近は複数でも構文エラーに該当しなくなったのでしょうか？

また、seoの観点からも同様に不利にならないでしょうか？

特にワードプレスを使用していると、プラグインで同じidが複数になってしまいます。

Answer 1

複数の同名id属性値は HTML の文法違反

同名のid属性値が複数存在する事は HTML の文法違反です。
「W3C Markup Validation Service」を使えばエラーを確認できます。

• The W3C Markup Validation Service

Google のウェブマスター向けガイドライン

ざっと読んだところではGoogleの「ウェブマスター向けガイドライン（品質に関するガイドライン）」には「HTMLの文法を遵守しなければならない」とはありませんが、私個人の考えとしては文法を守るべきだと思います。
ガイドラインは目安の一つであり、ペナルティが発生する全てのルールを公開しているとは限らない為、文法を守るに越したことはないと考えます。

• ウェブマスター向けガイドライン（品質に関するガイドライン） - Search Console ヘルプ

CSS, JavaScript への影響

同名なid属性値が存在するとCSSのidセレクタやJavaScriptの getElementById が一番初めにある要素ノードにしか適用されません。
2つ目以降の要素には適用されない為、期待通りに動作していないといえます。
Web制作上も問題がある設計なのでこの仕組みはよく理解しておく必要があります。

Re: realmccoy さん

Answer 2

同じ内容の id 属性を持つのタグが複数あっても良いかということでしたら、あってはいけません。
しかし、世の中のページはものすごい中身ばっかりです。
いちいち気にしてたらもちません。

seo に関しても、グーグル先生は間違いだらけのページには慣れてらっしゃいますから、いちいち気にされません。

Answer 3

特にワードプレスを使用していると、プラグインで同じidが複数になってしまいます。

それはWordPressの問題でなく、プラグインの問題か、もしくはその設定の問題の可能性があります。プラグインが特定できるのであれば、出力時に調整する事も可能かもしれません。

Comments

[退会済みユーザー]

例えばデフォルトの検索フォームを複数配置する際、単純に<?php get_search_form(); ?>としていましたが、これに更に追記することでid属性なども変えられるということですね？

[kei344]

引数で操作はしませんが、テーマから操作可能です。

たとえばテーマがhtml5に対応していれば下記のように書く事でidが重複する事も無いと思います。
function wpdocs_after_setup_theme() {
add_theme_support( 'html5', array( 'search-form' ) );
}
add_action( 'after_setup_theme', 'wpdocs_after_setup_theme' );

【get_search_form() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_search_form/

フルカスタムするならそれのためのフィルタもあります。

【WordPress 検索フォームのカスタマイズ | Webエンジニアブログ】
http://dim5.net/wordpress/search-form-customize.html

WordPressは過去との互換性のためにそのままにしているという事だと思われます。