レスポンシブデザインのベストプラクティス：メディアクエリとSEOの影響のためにHTML要素を複製しますか？
HTMLの出現順に、図タグ、ヘッドグループタグ、記事タグのあるページがあります。
メディアクエリを使用してページのデザインをレスポンシブにするためには、要素の順序を変える必要があるため、タイトルの後に画像が表示されます。
私が考えることができる最も簡単な解決策は、ソースコードでheadgroupタグを複製し、figureタグの前にコピーを配置することです。これにより、ビューポートサイズに応じて適切なタグを表示/非表示できます。
しかし、これはSEOに関しては理想的ではないと感じています。
私の質問は簡単です：
この単純な手法は本当にSEOに影響を与えますか？
ページ内で重複する要素を宣言するためのhtml属性はありますか？
別の推奨ソリューションはありますか？ベストプラクティス？
アドバイスをお願いします！
しかし、これはSEOに関しては理想的ではないと感じています。
はい、私はそれをしません。
さらに悪いことに、ドキュメントのアウトラインに依存するユーザー（スクリーンリーダーなど）やCSSを使用しないユーザー（テキストブラウザー、フィードリーダーなど）にとっても悪いことです。
別の推奨ソリューションはありますか？ベストプラクティス？
CSSを使用します。
「クラシック」floatまたはpositionまたは Regions 、 Flexible Box 、 Grid Layout 、-などの新しい方法を使用する テンプレートレイアウト 、…
ページ内で重複する要素を宣言するためのhtml属性はありますか？
いいえ、正確ではありません。 hidden属性 があります。
要素で指定されている場合、要素がまだページの現在の状態に直接関連していないか、もはや関連していないこと、またはコンテンツがページの他の部分で再利用されることを宣言するために使用されていることを示しますユーザーが直接アクセスします。
あなたの場合、あなたはそれを切り替えるために（そしてどのメディアクエリが起動されたかを認識するために）JSを使わなければなりません。
<hgroup>非推奨 したがって、使用すべきではありません。
私の経験では、注文のSEOへの影響の違いはごくわずかです。セマンティックHTML（つまり、適切な見出し、キャプションなど）を使用すると、問題ありません。
上記のように、位置決めにはCSSを使用します。