Готов ли вывод Figma в HTML к SEO? Что проверить

Короткий ответ: визуальная точность и готовность к SEO — две разные вещи. Проверьте, что экспорт использует семантический HTML (а не стилизованные <div>), логичный порядок заголовков, реальный alt-текст на изображениях, а также что вы сами добавили мета-заголовок и описание страницы — экспорт Figma в код даёт вам разметку, а не SEO-метаданные страницы.

Почему «выглядит правильно» — это не то же самое, что «готово к SEO»

Некоторые подходы к конвертации Figma в код — особенно основанные на скриншотах или изображениях — могут воспроизвести дизайн пиксель в пиксель, используя абсолютно позиционированные элементы или обобщённое месиво из <div> без какого-либо семантического смысла. Визуально это выглядит идентично дизайну. Но поисковым системам такой вывод даёт почти ничего для понимания структуры страницы: нет иерархии заголовков, которую можно проследить, нет ориентирующих (landmark) элементов, нет сигнала о том, что здесь навигация, что — основной контент, а что — подвал. Визуальная точность и структура, доступная для сканирования, — это разные задачи, и инструмент может решить одну без другой.

Что действительно нужно проверить

Семантические элементы, а не месиво из <div>. Откройте экспортированный HTML и найдите <header>, <nav>, <main>, <article>, <section>, <footer> там, где они соответствуют роли контента — а не страницу, целиком построенную из неподписанных <div>. Это главное структурное различие между «выглядит так же» и «читается так же» для краулера.

Логичный порядок заголовков. Один <h1> на странице, и заголовки, последовательно понижающиеся по уровню (h2 внутри раздела перед любым h3 внутри него), а не скачущие произвольно в зависимости от того, какой размер шрифта выглядел уместно в дизайне. В Figma нет встроенного понятия уровней заголовков — текстовый слой, стилизованный так, чтобы выглядеть крупным, автоматически не становится <h1> — поэтому это стоит проверить вручную независимо от того, каким инструментом сгенерирована разметка.

Alt-текст на изображениях. Экспортированным изображениям нужны осмысленные атрибуты alt, а не пустые строки или имя файла. Это должно исходить из контекста, который сам дизайн не всегда несёт (что означает декоративное фоновое изображение, не всегда очевидно по одному только фрейму), поэтому здесь тоже стоит запланировать ручной проход.

Мета-заголовок и описание уровня страницы. Об этом стоит сказать прямо: экспорт Figma в код создаёт разметку для содержимого раздела или страницы — он не знает, какой <title> или мета-описание вы хотите для этого URL после публикации. Добавьте их сами как часть процесса публикации, точно так же, как для любой написанной вручную страницы.

Структурированные данные, если странице они нужны. Страницы товаров, статьи и FAQ выигрывают от JSON-LD (Product, Article, FAQPage и т. д.), но это разметка, которую вы добавляете под конкретное содержимое страницы — обобщённый экспорт из Figma не может вывести её самостоятельно, поскольку она зависит от реальных данных (цена, наличие, дата публикации), которых в дизайне нет.

Вес страницы. Обычный HTML/CSS-экспорт без зависимости от фреймворка изначально легче того, что построено на таблице стилей полноценного фреймворка — это стоит учитывать, если скорость загрузки страницы (реальный фактор ранжирования) важна для конкретной страницы.

Чем MarkupGen помогает «из коробки»

По умолчанию, а не как опциональная настройка, вывод отдаёт предпочтение семантическим HTML-элементам, а не вложенным <div> — что именно это означает на практике, см. в статье Figma в семантический HTML. Структура Auto Layout переносится в логичный порядок DOM, а не в абсолютно позиционированные фрагменты, что и делает возможной саму разумную иерархию заголовков. Чего он не делает — и чего разумно не может делать ни один инструмент перехода от дизайна к коду — так это знать целевое ключевое слово вашей страницы, писать за вас мета-описание или решать, какой тип JSON-LD подходит контенту, для которого у него нет модели данных. Это остаётся осознанным, ручным шагом при публикации.

Попробуйте на своём дизайне

Если вы сравниваете инструменты конвертации Figma в код и качество вывода с точки зрения SEO — часть вашего решения, структурная разница видна сразу же, как только вы открываете экспортированный HTML. Попробуйте MarkupGen бесплатно или прочитайте полное руководство по конвертации Figma в HTML с описанием всего процесса от начала до конца.