Ваше благополучие зависит от ваших собственных решений.

Джон Дэвисон Рокфеллер

Меню сайта
  • Компьютеры
  • Телефоны
  • Бизнес
  • Свое дело
  • Решение проблем
  • Интернет
  • Новости
  • Новости
    Реклама
    Реклама

    Адаптивный дизайн SEO контрольный список

    1. Контрольный список лучших практик
    2. Семантика кода
    3. Избегайте вставок
    4. Оптимизировать заголовки и мета описания
    5. доступность
    6. Основные соображения для вашего мобильного веб-дизайна
    7. Элемент Meta Viewport
    8. Жидкие изображения
    9. Отзывчивые видео
    10. Контрольные точки
    11. CSS медиа запросы
    12. Измерьте свой успех

    В ноябре 2016 года Google объявил о своем Индекс мобильной связи инициатива. Хотя мы не ожидаем увидеть его до 2018 года, Google сказал в недавнем веб-мастеров тусоваться что веб-сайты, планирующие перенести свой поддомен m-dot на полностью адаптивный веб-сайт, должны сделать это до того, как этот индекс для мобильных устройств начнет действовать.

    Прямо сейчас у Google есть настольный первый индекс. Для сайтов, использующих субдомен m-dot, это означает, что Google в основном использует сигналы с сайта для настольных компьютеров для определения рейтинга. Когда будет запущен индекс mobile-first, эта система будет полностью изменена. Google будет сканировать в первую очередь с точки зрения мобильных устройств.

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

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

    Адаптивный дизайн - самый устойчивый и перспективный способ адаптироваться к этим изменениям. Размещая один и тот же HTML-код на одном и том же URL-адресе независимо от устройства пользователя и полагаясь на CSS для изменения отображения страницы, ваш сайт получит следующие преимущества с точки зрения как SEO, так и UX:

    • Содержимое, размещенное на одном веб-сайте и по одному URL-адресу, значительно упрощает обмен и взаимодействие с пользователями.
    • Google проще и эффективнее сканировать, индексировать и организовывать ваш контент, так как нет необходимости сигнализировать о наличии соответствующих страниц для настольных компьютеров и мобильных устройств.
    • Не требует перенаправления на представление конкретного устройства, что сокращает время загрузки.
    • Меньше времени на управление и обслуживание одного сайта.
    • Повышает эффективность сканирования, поскольку Google будет сканировать каждую страницу только один раз, вместо того, чтобы извлекать две версии одного и того же контента с двумя разными пользовательскими агентами Googlebot.

    Вот контрольный список элементов, которые следует учитывать при создании пользовательского и дружественного к поиску (и дружественного для поисковых систем) сайта:

    Вот контрольный список элементов, которые следует учитывать при создании пользовательского и дружественного к поиску (и дружественного для поисковых систем) сайта:

    Контрольный список лучших практик

    Особенности SEO для мобильных устройств

    Основные соображения для вашего мобильного веб-дизайна

    Особенности SEO для мобильных устройств

    Скорость страницы

    Скорость страниц стала фактором ранжирования для Google еще в апреле 2010 года, и в настоящее время все понимают важность повышения скорости веб-сайта для поисковых систем и взаимодействия с пользователем, особенно на мобильных устройствах.

    Замена событий клика событиями касания, методами оптимизации изображений и другими действиями для улучшения загрузки ресурсов страницы на мобильных устройствах, таких как оптимизированное для мобильных устройств кэширование или сжатие файлов, - вот некоторые из действий, которые могут значительно помочь вам повысить скорость загрузки страницы вашего веб-сайта. Не забывайте следить за скоростью вашей страницы часто с Google Page Speed ​​Insights а также сторонние инструменты, такие как GTmetrix обнаруживать и решать любые потенциальные проблемы, которые могут замедлить ваши страницы.


    Скорость сайта для контент-маркетологов - смотрите полную презентацию на Slideshare

    Семантика кода

    Структурированные данные для мобильных устройств с помощью Schema.org - это еще один способ обогатить ваш контент и выделить его в результатах поиска (богатые фрагменты выглядят еще более заметными на мобильных устройствах из-за ограниченного пространства на экране). Микроданные событий (что позволяет пользователям легко обнаружить и посетить ваше мероприятие) и Разметка приложения (для отображения деталей вашего приложения в результатах поиска Google) - две наиболее распространенные формы структурированных данных для мобильных устройств.

    Избегайте вставок

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

    Оптимизировать заголовки и мета описания

    Дисплеи мобильных браузеров меньше, чем их настольные аналоги, что означает более ограниченное пространство для заголовков, URL-адресов и метаописаний в мобильных поисковой выдаче. Google по-прежнему экспериментирует с длиной тега заголовка на мобильном устройстве, поэтому не существует строгого правила относительно длины. Однако, придерживаясь менее 60 символов для заголовков и менее 155 символов для мета-описаний, вы можете ожидать, что по меньшей мере 90% из них будут отображаться правильно, без усечения.

    доступность

    Роботу Google необходим доступ ко многим ресурсам (таким как скрипты, CSS и файлы изображений) на вашей странице, чтобы оптимально отображать и индексировать контент. Это может повлиять на рейтинг страницы в поиске Google, и поэтому вам нужно убедиться, что ваш файл robots.txt не препятствует доступу этих файлов к пользовательскому агенту Google-Mobile и что он может видеть страницы как обычный пользователь. Использовать " Просмотреть как Google »(Которая имитирует сканирование и выполнение рендеринга, как в обычном процессе сканирования и рендеринга Google) и проверяет отчет о заблокированных ресурсах , который покажет вам ресурсы, используемые вашим сайтом, которые заблокированы для Googlebot.

    Основные соображения для вашего мобильного веб-дизайна

    Есть много аспектов, которые вы должны рассмотреть в самом начале вашего проекта по разработке мобильного сайта, если вы хотите обеспечить хороший пользовательский опыт. Избегание Adobe Flash, оптимизированное расстояние между элементами страницы или создание адаптивного меню навигации - это только некоторые из них. Тем не менее, как есть много статей Там о шаблонах дизайна и руководящих принципах для мобильной разработки, мы включили только факторы, которые могут оказать большее влияние на эффективность SEO вашего сайта.

    Элемент Meta Viewport

    Тэг meta name = ”viewport” дает контроль над шириной и масштабированием страницы на разных устройствах и помещается в заголовок html-страницы, как показано ниже:

    <meta name = "viewport" content = "width = device-width">

    Свойство width контролирует размер области просмотра. Он может быть установлен на определенное количество пикселей, например width = 600, или на специальное значение device-width, которое является шириной экрана в CSS-пикселях в масштабе 100%.

    Для получения дополнительной информации об использовании элемента meta viewport, кликните сюда ,

    Жидкие изображения

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

    Существует два подхода к созданию плавных изображений:

    • Вы можете сделать изображение масштабируемым вместе с окном браузера, так как оно сужается, установив максимальную ширину изображения на 100%:

    <img style = "max-width: 100%; высота: авто;" src = "picture-example.jpg" alt = "London-landscape">

    • Если вы хотите, чтобы изображение масштабировалось с размером текста, вам придется установить ширину изображения в процентах от общей ширины страницы:

    <img style = "float: right; ширина: 41,66%; поле слева: 2rem;" src = "picture-example.jpg" alt = "London-landscape">

    Отзывчивые видео

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

    Контрольные точки

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

    Не забудьте также создавать точки останова для устройств, когда они находятся как в горизонтальной, так и в портретной ориентации. Ты можешь читать Эта статья для получения дополнительной информации о создании пользовательских точек останова.

    CSS медиа запросы

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

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

    Измерьте свой успех

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

    Профиль
    Реклама
    Деловой календарь
    Пн Вт Ср Чт Пт Сб Вс
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    Реклама
       
    Sti.lg.ua © 2016