Что такое аккордеон:

Аккордеоны HTML — это компоненты пользовательского интерфейса, которые позволяют веб-разработчикам скрывать и отображать контент на веб-странице. Они часто используются, чтобы уменьшить беспорядок и улучшить взаимодействие с пользователем, представляя информацию в организованном и легко усваиваемом формате. Когда пользователь щелкает заголовок аккордеона, связанный с ним контент разворачивается или сворачивается.

Вам известны следующие термины?

Примечание. Если вы знаете эти термины, вы можете пропустить этот раздел.

  • Условный рендеринг. Условный рендеринг — это метод, используемый в программировании для отображения различного контента или компонентов на основе определенных условий. Это позволяет разработчикам создавать более динамичные и интерактивные пользовательские интерфейсы, в которых определенные элементы отображаются или скрываются только в зависимости от действий пользователя или состояния приложения.
  • Веб-сканеры. Веб-сканеры, также известные как поисковые роботы или боты, представляют собой автоматизированные программы, используемые поисковыми системами для просмотра и индексации веб-сайтов в Интернете. Эти программы переходят по ссылкам с одной страницы на другую, собирая такую ​​информацию, как содержание страницы, ключевые слова и метаданные. Собранные данные затем используются для создания поисковых индексов и рейтингов.
  • SEO (поисковая оптимизация): SEO, или поисковая оптимизация, относится к практике оптимизации содержания и структуры веб-сайта для повышения его рейтинга на страницах результатов поисковых систем (SERP). Цель SEO — увеличить органический трафик на сайт, сделав его более заметным и привлекательным для поисковых систем и пользователей.
  • Манипуляции с DOM (объектной моделью данных). Манипуляции с DOM — это процесс использования JavaScript для изменения структуры, содержимого или стиля веб-страницы после ее загрузки в браузере. Этого можно добиться путем доступа и изменения объектной модели документа (DOM) веб-страницы, которая представляет собой иерархическую структуру элементов HTML и XML. Манипуляции с DOM обычно используются в веб-разработке для создания интерактивных и динамических пользовательских интерфейсов.

Обычные способы создания аккордеонов HTML:

  1. Аккордеоны, которые чаще всего отдают на аутсорсинг:

Библиотеки пользовательского интерфейса:

Пакеты NPM:

2. При использовании таких библиотек, как ReactJS, часто используются переменные состояния для обработки состояний переключения аккордеонов.

Примечание:

Если вы используете популярные библиотеки пользовательского интерфейса, такие как Bootstrap или MUI, вам не нужно беспокоиться о следующих проблемах, об оптимизации уже позаботились.

Разные подходы, тот же результат:

Взгляните на следующие результаты (оба выглядят немного иначе, так как CSS не применяется):

Хотя результаты могут выглядеть одинаково, в исходных кодах обоих подходов есть одно большое различие. Может быть визуально не очень приятно видеть скриншоты исходного кода здесь, ниже приведены размещенные ссылки на оба подхода, вы можете перейти по этим ссылкам и проверить разницу в исходных кодах для себя.

  1. Без условного рендеринга:

2. С условным рендерингом:

Проблема с условным рендерингом:

  • При использовании библиотек внешнего интерфейса необходимо определить переменные состояния и написать логику, это становится еще хуже, когда все, что вам нужно использовать, это DOM.
  • Резюме не будет присутствовать в исходном коде до тех пор, пока заголовок не будет щелкнут/нажат, т. е. аккордеон не будет развернут.
  • В результате поисковые роботы не смогут получить доступ к содержимому сводки.
  • Это может нанести большой ущерб вашему SEO (поисковая оптимизация).

Ниже приведен один из самых простых способов создания оптимизированных аккордеонов.

Теги «details» и «summary» в HTML:

Два тега HTML – это теги details и summary.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Поддержка браузера:

Фрагмент кода:

Как использовать эти теги? Взгляните на следующий фрагмент кода:

<details>
      <summary>
          <h1>Abbreviation</h1>
      </summary>
      <p>JavaScript is often abbreviated as JS.</p>
</details>

Вот так просто написать аккордеон, используя подробные и сводные теги, без переменных состояния, без логики, без библиотек, таких как ReactJS, только чистый HTML.

Почему вы должны рассмотреть возможность использования этого подхода?

Даже когда аккордеон не развернут, исходный код страницы по-прежнему будет содержать содержимое аккордеона, в отличие от условно отображаемых аккордеонов, поэтому поисковые роботы по-прежнему будут иметь доступ к содержимому, написанному внутри аккордеонов, которое не видно пользователю. пользователя при загрузке страницы.

Это единственный способ сделать это?

Нет, еще один способ сделать это — использовать для этого атрибут display в CSS, мы не будем рассматривать этот подход в статье, но основная дорожная карта будет заключаться в том, чтобы установить значение отображения по умолчанию на «none», и когда заголовок щелчок/касание, используйте манипулирование DOM (объектная модель документа) или переменную состояния, чтобы изменить отображение на «блок» (или «встроенный блок» и т. д.).