Mobile-версия отличается от десктопной по контенту

Симптом

• На мобильном устройстве виден другой набор блоков, чем на десктопе.
• Текст, изображения или кнопки пропадают, заменяются на более короткие версии.
• На мобильном сайте страница загружается быстрее, но в поисковой выдаче снижается позиция.
• В Google Search Console в отчёте «Mobile Usability» появляются ошибки «Content not indexed on mobile».
• При просмотре исходного кода мобильной версии видны разные метатеги meta name="viewport" или content="width=device-width".
• Ссылки, ведущие на мобильный URL, перенаправляют на десктопную версию (или наоборот).

Причина

1. Динамический рендеринг – сервер отдаёт разный HTML в зависимости от User‑Agent.
2. JavaScript‑рендеринг – контент генерируется скриптами, которые не выполняются на мобильных устройствах из‑за ограничений браузера или отключённого JavaScript.
3. Параметры noscript – контент внутри <noscript> виден только при отключённом JS, но не в мобильной версии.
4. Переадресации – правила в .htaccess/nginx могут перенаправлять мобильных пользователей на другую страницу.
5. Кеширование – CDN хранит разные версии страниц для десктопа и мобайла, но они не синхронизированы.
6. Метатеги viewport – неправильная настройка приводит к тому, что мобильный браузер «сжимает» контент, скрывая часть текста.

Как проверить

1. Проверка User‑Agent
   bash curl -A "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1" https://example.com/page Сравните вывод с десктопным запросом.

2. Проверка JavaScript‑рендеринга
   - Откройте страницу в Chrome DevTools → Network → Disable cache → Reload.
   - Посмотрите, какие ресурсы загружаются и какие блоки появляются в DOM.

3. Проверка noscript
   ```html
   

   Контент для отключённого JS

`` Убедитесь, что нужный контент не находится внутри

4. Проверка переадресаций
   bash curl -I -L https://m.example.com/page
   Посмотрите заголовки Location.

5. Проверка метатега viewport
   html <meta name="viewport" content="width=device-width, initial-scale=1">
   Убедитесь, что он присутствует и корректен.

6. Проверка кеша CDN
   - Очистите кеш для мобильной версии.
   - Сравните HTML после очистки.

Решение

1. Унифицировать контент
   - Переместите общий контент в один шаблон (Twig, Handlebars, PHP).
   - Используйте условные конструкции только для небольших изменений (например, высота баннера).

2. Обеспечить одинаковый HTML
   - Уберите динамический рендеринг.
   - Если нужен разный контент, используйте data- атрибуты и один и тот же HTML, а JS меняет видимость.

3. Обеспечить JavaScript‑рендеринг
   - Включите defer/async для скриптов, чтобы они не блокировали рендеринг.
   - Добавьте fallback‑контент в <noscript> только для критических элементов.

4. Переадресации
   - В .htaccess (Apache) или nginx.conf используйте правила без RewriteCond %{HTTP_USER_AGENT}.
   apache RewriteEngine On RewriteCond %{HTTP_HOST} ^m\.example\.com$ [NC] RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]
   - Или наоборот, перенаправляйте только при необходимости.

5. Кеширование
   - Настройте CDN так, чтобы он кешировал одинаковую версию для всех устройств.
   - Включите заголовки Cache-Control: public, max-age=86400.

6. Проверка после изменений
   - Снова запустите curl с мобильным User‑Agent.
   - Проверьте в Google Search Console, исчезли ли ошибки.
   - Используйте инструмент «Проверка вида на мобильных устройствах» в GSC.

7. Оптимизация контента
   - Если мобильная версия должна быть короче, убедитесь, что ключевые фразы и заголовки остаются.
   - Добавьте meta name="description" и h1 с тем же текстом, что и на десктопе.

Связанные

• Проблемы с индексацией JavaScript‑контента
• Как настроить правильный viewport для мобильных устройств