Flexbox は SEO を損なうことなく動的な並べ替えを実現できますか?

Flexbox を使用した CSS のみの並べ替え

課題:

検索エンジンを維持するには-不必要な重複なしに特定の位置の要素を表示しながら、フレンドリーでセマンティックな DOM 構造。

レイアウト要件:

• デスクトップを中心とした垂直方向のフレックスボックス ベースのレイアウト
• 既知または固定の高さなし
• デスクトップの右列のタグチーム動作
• IE11 のサポート

実現可能性:

CSS のみの解決策:

残念ながら、CSS のみのフレックスボックスは、このような複雑な並べ替えをネイティブにサポートしていません。ただし、固定高さを利用することで妥協することも可能です:

<code class="css">.flex {
  height: 90vh;
  flex-flow: column wrap;
}
.flex div {
  flex: 1;
  width: 50%;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

JS ベースのソリューション:

あるいは、緑色の div を切り取ってその内容を貼り付けることもできます。 JavaScript を使用してピンク色に変換します。このアプローチでは、パフォーマンスやちらつきの問題が発生する可能性がありますが、特定のシナリオに合わせて調整できます。

高さが固定された例:

次のコードは、CSS のみで動作するコードを示しています。固定高さを使用したソリューション:

<code class="css">.flex {
  height: 90vh;
}</code>

以上がFlexbox は SEO を損なうことなく動的な並べ替えを実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。