Формирование FAQ-аккордеона с микроразметкой

Заполните вопросы и ответы и получите HTML, CSS и JS.

/* CSS */
table.almaAccordion,
table.almaAccordion > tbody,
table.almaAccordion > tbody > tr
table.almaAccordion > *, table.almaAccordion > * > *, table.almaAccordion > * > * > *	{
	display:block;
	width:100%;
	width:100%;
	color:#444444;;
}
table.almaAccordion > tbody > tr	{
	overflow:hidden;
	transition:all 400ms ease-in-out;
	box-shadow:inset 0 0 0 1px #f4f4f4;
	background:#fff;
	border-radius:5px;
	margin:15px 0 0 0;
}

table.almaAccordion > tbody > tr > td	{
	width:100%;
	padding:0px 25px 25px 25px;
	box-sizing:border-box;
	transition:all 400ms ease-in-out;
}

table.almaAccordion > tbody > tr > td:first-child	{
	display:block;
	padding:25px 45px 25px 25px;
	font-weight:700;
	margin:0;
	position:relative;
	transition-duration:0.2s;
	background:transparent;
	color:!main_color_0!;
	cursor:pointer;
}

table.almaAccordion > tbody > tr > td:first-child:hover	{
	color:!bright_color!;
}
table.almaAccordion > tbody > tr.active {
	box-shadow:inset 0 0 0 1px #CFD0D5;
}
table.almaAccordion > tbody > tr.active > td:first-child	{
	color:rgba(27,143,238,1);
}
table.almaAccordion > tbody > tr > td:first-child::before, table.almaAccordion > tbody > tr > td:first-child::after	{
	content:'';
	display:block;
	width:16px;
	height:1px;
	position:absolute;
	right:20px;
	top:35px;
	transition-duration:0.2s;
	background:rgba(27,143,238,1);
	transform:rotate(0deg);
}
table.almaAccordion > tbody > tr > td:first-child::after	{
	transform:rotate(90deg);
}
table.almaAccordion > tbody > tr.active > td:first-child::before, table.almaAccordion > tbody > tr.active > td:first-child::after	{
	transform:rotate(360deg);
}
table.almaAccordion > tbody > tr > td:first-child > h3 {
    padding:0;
    margin:0;
}

Результат будет выглядеть:

Что такое FAQ-аккордеон и зачем он нужен

FAQ-аккордеон — это элемент интерфейса, в котором вопросы отображаются в виде заголовков, а ответы скрыты и показываются только при клике на соответствующий вопрос. Такой формат решает несколько важных задач:

Экономия места — длинный список вопросов не загромождает страницу
Улучшение юзабилити — пользователь быстро находит нужный вопрос, не пролистывая весь контент
Снижение показателя отказов — интерактивность удерживает внимание посетителя
Адаптивность — аккордеон корректно отображается на мобильных устройствах

«Аккордеон — это не просто визуальный эффект. Это способ структурировать информацию так, чтобы она была полезна и пользователю, и поисковому роботу одновременно».

Почему Microdata подходит для аккордеона лучше, чем JSON-LD

При реализации интерактивного FAQ-аккордеона формат Microdata имеет ряд преимуществ перед JSON-LD:

Критерий	Microdata	JSON-LD
Расположение кода	Встроена в HTML-элементы контента	Отдельный блок <script> в head или body
Синхронизация с контентом	Автоматическая: один и тот же текст для пользователя и робота	Ручная: нужно дублировать текст в скрипте
Работа с динамическим контентом	Проще: атрибуты остаются при подгрузке через сервер	Сложнее: нужно генерировать JSON на лету
Поддержка в старых CMS	Высокая: достаточно править HTML-шаблоны	Низкая: требуется поддержка вставки скриптов
Риск рассинхронизации	Минимальный	Высокий: можно забыть обновить скрипт при правке контента

Структура аккордеона с микроразметкой Microdata

Для корректной работы аккордеона с микроразметкой необходимо соблюдать строгую иерархию элементов и атрибутов schema.org:

Внешний контейнер с атрибутами itemscope и itemtype="https://schema.org/FAQPage"
Каждый элемент аккордеона — блок с itemtype="https://schema.org/Question"
Заголовок вопроса размечается атрибутом itemprop="name"
Внутри вопроса — контейнер ответа с itemtype="https://schema.org/Answer"
Текст ответа получает атрибут itemprop="text"
JavaScript для аккордеона не должен нарушать структуру DOM-элементов с микроразметкой

«Главное правило: микроразметка должна описывать тот же контент, который видит пользователь. Если ответ скрыт за кликом — это нормально, но он должен присутствовать в исходном коде страницы».

Как проверить корректность разметки аккордеона

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

Google Rich Results Test — введите URL страницы, проверьте, распознаётся ли FAQPage и все вопросы
Яндекс.Вебмастер Микроразметка — покажет, как Яндекс интерпретирует ваши данные
Schema.org Validator — официальная проверка синтаксиса Microdata
Просмотр исходного кода — убедитесь, что атрибуты не повреждены и структура вложенности соблюдена
Тест доступности — проверьте, работает ли аккордеон с клавиатуры и скринридерами

«Поисковые роботы видят исходный код страницы, а не то, что отображается после выполнения JavaScript. Поэтому микроразметка должна присутствовать в статическом HTML, даже если контент скрыт за аккордеоном».

Типичные ошибки при создании аккордеона с микроразметкой

Ошибка	Последствия	Как избежать
JavaScript удаляет или перемещает элементы с itemprop	Разметка теряется, поисковик не видит данные	Управляйте только видимостью (hidden, display), не меняйте DOM-структуру
Ответы подгружаются динамически после загрузки страницы	Робот не видит контент при индексации	Генерируйте весь контент на сервере, скрытие делайте через CSS/JS
Нарушена вложенность: Answer не внутри Question	Связь вопрос-ответ не распознаётся	Строго соблюдайте иерархию: FAQPage Question Answer
Текст в itemprop не совпадает с видимым контентом	Поисковики могут проигнорировать разметку	Используйте один и тот же текст для пользователя и для атрибута
Отсутствуют ARIA-атрибуты для доступности	Проблемы у пользователей с ограниченными возможностями	Добавляйте aria-expanded, role="button", tabindex для интерактивных элементов

SEO-преимущества аккордеона с микроразметкой

Правильно реализованный FAQ-аккордеон с разметкой даёт комплексный эффект для продвижения:

Расширенный сниппет — вопросы могут отображаться прямо в выдаче, увеличивая площадь и привлекательность результата
Голосовой поиск — структурированные ответы лучше обрабатываются Алисой, Сири и другими ассистентами
Релевантность по низкочастотным запросам — каждый вопрос может соответствовать конкретному поисковому запросу пользователя
Улучшение поведенческих факторов — интерактивность и удобство снижают показатель отказов
Локальное преимущество — если вопросы касаются услуг в конкретном городе, это усиливает локальное ранжирование

Кейс: Внедрение аккордеона с микроразметкой для сайта услуг

Исходные данные: Сайт имел страницу с 8 вопросами в виде простого списка. CTR из поиска — 2.3%, средняя позиция — 7.4.

Что было сделано:

Список вопросов преобразован в аккордеон с микроразметкой Microdata
Добавлен плавный скрипт сворачивания с поддержкой ARIA
Проверена валидность через Google Rich Results Test и Яндекс.Вебмастер
Отправлена страница на переобход

Результат через 4 недели:

CTR вырос до 3.8% (+65%)
Средняя позиция улучшилась до 5.1
Появились расширенные сниппеты с 3 вопросами в выдаче Яндекса
Время на странице увеличилось на 22%, показатель отказов снизился на 15%

Генератор FAQ-аккордеона с микроразметкой schema.org/FAQPage Microdata