Официальный сайт движения «Москва без Лужкова!»
Главная Новости Москвы Наши новости Популярное
  • Новости
  • Новости
  • ВХОД В ЛИЧНЫЙ КАБИНЕТ
    логин
    пароль
       
    Новости

    Мобильное SEO - Оптимизация пользовательского опыта и SEO одновременно

    1. Начните с пользователя
    2. Быть отзывчивым уже - есть отзывчивый сайт!
    3. Адаптивный дизайн типографии
    4. Искусство негативного пространства
    5. Иметь контактные и проверочные формы, которые работают
    6. Используйте SVG всякий раз, когда можете
    7. Проверьте дизайн .. Что еще?
    8. Дизайн эффективного навигационного меню
    9. Часть 2. Сделайте Google счастливым
    10. Сделайте свой сайт отзывчивым (снова)
    11. Сделайте ваш сайт загружаться быстрее
    12. Содержание (все еще) король
    13. Научитесь любить FeedTheBot: оптимизируйте свой сайт для Google
    14. Мобильный SEO Action Cheatsheet
    15. Заключение

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

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

    Начните с пользователя

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

    В основе каждого из ваших проектов вы должны учитывать пользователя. Без пользователя вы не будете двигаться вперед, независимо от того, сколько вы пытаетесь. Вы уже слышали о термине «пользовательский опыт» (или UX), но что он означает для вашего продукта?

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

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

    Нет необходимости расставлять приоритеты, потому что вы должны угодить как Google, так и вашим пользователям, что очень рекомендуется

    В настоящее время у вас должен быть отзывчивый сайт.

    Быть отзывчивым уже - есть отзывчивый сайт!

    Вы, наверное, слышали это тысячи раз. К сожалению, я до сих пор вижу так много примеров сайтов, которые еще не отвечают. Прошло более трех лет с тех пор, как медиа-запросы стали стандартами W3C, но почему еще не все их приняли? Если это что-то, что выводит меня из себя, это невежество в отношении широко принятых стандартов. Не забывайте о своем веб-решении, потому что вы играете с шансами своего собственного проекта.

    Мне трудно поверить, что ты не знаю много об адаптивном веб-дизайне еще. Но если ты действительно не (чувак, серьезно?), Получите этот книга. Прочитайте это от покрытия до покрытия, затем прочитайте это снова. Он был написан сравнительно недавно и считается «адаптивным веб-дизайном 101» на 2015 год.

    Знаете ли вы, как читается ваш сайт на мобильном телефоне или планшете?

    Адаптивный дизайн типографии

    Да, я все еще держусь за эту тему отзывчивого безумия. Типография - это такая важная часть веб-сайта, что ее игнорирование принесет вам негативные отзывы ваших читателей. Часто легко читать текст на рабочем столе, но, черт возьми, я много прищурился в последние годы, пытаясь расшифровать простой текст на мобильном телефоне. Я ненавижу это, не заставляй меня делать это - никогда! Я покину ваш сайт быстрее, чем Ferrari в поул-положении, и у меня не будет никаких шансов вернуться снова.

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

    Никогда не используйте шрифт размером менее 14px на мобильном устройстве (привыкните к идее иметь не менее 16px, не более 8-9 слов в строке) и высоту строки не менее 18px. Это облегчит чтение текста. Держите заголовки короткими и проясните это. Это заголовки, поэтому вам нужно использовать шрифт большого размера и жирный шрифт с максимум четырьмя словами в строке.

    Веб-шрифты имеют большое значение в типографии, и я советую вам использовать их. Они сэкономят вам деньги и время плюс; они оптимизированы для SEO. Просто чтобы убедиться, что все проверено, всегда используйте запасную гарнитуру на случай, если браузер не загружает пользовательские веб-шрифты.

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

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

    Текст такой же, единственное отличие - хорошее форматирование и правильная типография справа.

    Искусство негативного пространства

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

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

    Создайте живую проверку полей ввода.

    Иметь контактные и проверочные формы, которые работают

    Веб-формы могут варьироваться от регистрационных форм и контактных форм до полей ввода в процессе оформления заказа или даже в окне поиска. Убедитесь, что они работают. Вы, наверное, уже десять раз проверяли код и проверяли его. Формы работают как надо. Но они действительно работают?

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

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

    Чтобы избежать путаницы, вы можете создать одну вещь: проверка полей ввода , Это означает, что если вам нужен номер телефона от меня, убедитесь, что я не могу отправить форму, если в поле есть текст, который не является цифрами. Кроме того, если вам нужен номер в определенном формате, не просите меня написать его таким образом. Мне все равно, нужен ли вам номер в американском формате, но позвольте мне написать десятизначное число и отформатировать его самостоятельно с помощью фрагмента кода. Как трудно это может быть?

    Если я отправлю форму и обнаружу ошибку, вы должны сообщить мне точную ошибку и что я могу сделать, чтобы исправить ее. Не ... повторяю, не надо! - попросите меня заполнить все поля еще раз. Вот где вы потеряли потенциального клиента.

    Вот где вы потеряли потенциального клиента

    Пример обработки ошибок в мобильном приложении.

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

    Было бы идеально, если бы сообщение об ошибке также указывало на ошибку: Пожалуйста, введите действительный адрес электронной почты. К сожалению, «.xom» не является допустимым доменом. Это потребовало бы больше кода, но пользователи без сомнения поймут, почему ошибка возникла в первую очередь.

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

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

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

    Более короткие формы всегда более успешны.

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

    Используйте SVG на своих сайтах.

    Используйте SVG всякий раз, когда можете

    Некоторые из вас могут не знать, что такое SVG-изображение, поэтому я объясню вам очень кратко. SVG обозначает масштабируемую векторную графику и, как следует из названия, представляет векторное изображение, которое можно масштабировать вниз в соответствии с экраном, на котором оно просматривается.

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

    Более того, с помощью значков шрифтов вы ограничены одним цветом, тогда как файлы SVG гораздо более адаптируемы, когда речь идет о цветах.

    Вы можете использовать графику SVG практически во всем: логотипы, элементы пользовательского интерфейса, графики, значки и многое другое. SVG действительно будущее и заслуживает отдельной статьи. К счастью, есть замечательный, написанный командой Создай свой путь ,

    Проверьте дизайн .. Что еще?

    Позвольте мне записать это для вас: UX - это не только дизайн. Запомни это. Дизайн - это только часть этого большого спектра элементов. Есть много вещей, которые вы можете сделать для улучшения UX, которые не обязательно связаны с дизайном. Их легко спутать, потому что большинство создаваемых вами вещей выражают себя через визуальные очереди. Хороший пример - навигация.

    Хороший пример - навигация

    Обратите особое внимание на навигацию. Убедитесь, что это работает.

    Дизайн эффективного навигационного меню

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

    Веб-сайт с плохой навигацией походит на сложную структуру автострады без знаков. Возможно, было бы здорово проехать на своем Tesla со скоростью 175 км / ч, но незнание того, какой выход быстро сделать, превращается в небольшую проблему.

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

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

    • сохранить основную навигацию в правом верхнем углу (логотип слева)
    • ограничение количества опций не более 6
    • используя короткие и описательные слова («Контакт» вместо «Ударь нас»)
    • навигация в нижнем колонтитуле, если страницы длинные, и навигация, которую легко найти и щелкнуть, если вы находитесь на переносном устройстве.

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

    Плохо реализованные всплывающие окна также раздражают меня так же, как и все остальное. Несколько дней назад я читал эту статью на своем iPhone из всемирно известного интернет-журнала. Появилось всплывающее окно, рассказывающее мне об использовании файлов cookie. Это достаточно справедливо. Но не было кнопки, чтобы принять или отменить. Не было никакого способа выйти из этого всплывающего окна. Я нажал на нее, я провел, я ущипнул, я сделал все, что нужно сделать.

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

    Насколько сложно было бы им с самого начала дать мне понять, что это наложение исчезнет через 10 секунд? Не намного сложнее, чем одна строчка кода, но они все равно оставили это и расстроили меня.

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

    Теперь, во второй части, что эти проклятые роботы Google хотят от вас?

    Знаете ли вы, что Google хочет от вас?

    Часть 2. Сделайте Google счастливым

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

    Сделайте свой сайт отзывчивым (снова)

    По словам многих источников в Интернете, в том числе Социальные медиа сегодня и сам Google, настоятельно рекомендуется иметь адаптивный веб-дизайн для вашего сайта , Начиная с 21 апреля 2015 года, Google собирается внести небольшие изменения в свой алгоритм поиска, чтобы пользователям было легче находить мобильный контент.

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

    Зинеб Айт Бахаджи (Zineb Ait Bahajji) из Google сказал в ветке справки Google для веб-мастеров, что они не оценивают мобильные устройства лучше, но предпочитают, потому что это:

    «Проще в обслуживании, оно ориентировано на будущее, и мы видим меньше ошибок конфигурации с RWD (например, с ошибочными перенаправлениями или плохим обнаружением пользовательских агентов)»

    Создавая адаптивный веб-сайт, вы порадуете как своих пользователей, так и Google, и это правило № 1, о котором следует помнить.

    Не беспокойтесь о своем PageRank. Веб-сайт, который реагирует лучше, чем веб-сайт, который перенаправляет пользователей на версию m dot (что-то вроде m.1stwebdesigner.com - практика, которая была очень популярна в начале 2000-х). Хотя видео уже полтора года, Мэтт Каттс из Google объясняет почему.

    Как быстро ваш сайт?

    Сделайте ваш сайт загружаться быстрее

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

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

    Так выглядит простая сеть CDN с сервером происхождения в Южной Америке.

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

    PageSpeed ​​Insights представляет собой набор инструментов, которые могут помочь вам определить лучшие рекомендации по производительности для вашего веб-сайта и могут помочь вам автоматизировать процесс оптимизации.

    Одна из самых простых вещей, которую можно сделать для повышения скорости страницы, - это заплатить за лучший план хостинга. Плохой хостинг часто является основной причиной медленной загрузки сайтов. Тем не менее, это также отсутствие сети доставки контента (CDN). CDN легко объяснить. Вместо того, чтобы иметь сервер в США, к которому имеют доступ все в мире, эта сеть обеспечивает более быструю доставку содержимого веб-сайта людям, которые находятся в других частях мира через пограничные серверы, поэтому их запросы не приходится «путешествовать» на таком большом расстоянии.

    Создайте хороший контент для ваших посетителей.

    Содержание (все еще) король

    Это уже клише, я знаю, но хороший контент по-прежнему лучший способ занять высокое место в Google. Вы хотите писать действительно хороший контент, ориентируясь на читателей, а не ради ключевых слов.

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

    «Как долго должна быть статья?»

    - это вопрос, который я получаю много. Это зависит от обстоятельств, но статьи, которые короче, чем 1000 слов, не имеют большого значения для Google, если они не являются хитом в социальных сетях или вы не являетесь The New York Times. Более того, если вы The New York Times, вы, вероятно, больше не заботитесь о рейтинге. Однако, если вам все еще нужно над этим работать, имейте в виду: Google любит длинные информационные и полезные статьи.

    Я также думаю, что это хорошая идея, чтобы сохранить равновесие. Я могу написать статью или 4k + слова в любое время, но сколько людей прочитают весь кусок? Не много. Следствием этого будет то, что не многие люди будут делиться этим в социальных сетях. Для информационных статей в блогах я лично считаю, что от 1500 до 2500 слов - это самое приятное место, поэтому немного короче, чем эта статья. Если вы можете остаться между этими двумя, вы находитесь там, где должны быть и чувствуете себя хорошо.

    Суть в том, что вам нужно написать контент, которым стоит поделиться. Ценность предложения, а не статьи, заполненные ключевыми словами. Руководства, которые я написал для вас выше, следует помнить, но качество по-прежнему является наиболее важным из них. Вы можете написать популярную статью длиной в 800 слов, которая лучше, чем статья из 3000 слов, написанная только для Google. Пишите для своей аудитории; и делай это хорошо!

    Научитесь любить FeedTheBot: оптимизируйте свой сайт для Google

    Если вы хотите получить быстрый обзор вашего сайта в глазах Google, FeedTheBot это один из лучших инструментов там. Вам нужно только заполнить свой веб-сайт и позволить программному обеспечению проверить его. Через несколько секунд он вернется со строкой ошибок, которые ваш сайт должен исправить.

    Начните с самых важных, но не забывайте о других. Чем лучше вы здесь, тем больше Google оценит ваш сайт.

    Важно помнить, что Google - это не человек, а робот. Google не получает представление о том, какой пользователь предлагает своим посетителям, поэтому лучшее, что он может сделать, - это ранжировать ваш сайт по сложному набору параметров.

    Это может быть что угодно из числа неработающих ссылок, использования robots.txt, использования JavaScript и CSS, хитрых перенаправлений, наполнения keyowrd и так далее. Если у вас есть динамический контент на вашем веб-сайте, всегда полезно регулярно посещать FeedTheBot и следить за тем, чтобы все было по-прежнему под контролем.

    Мобильный SEO Action Cheatsheet

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

    1. Спускайтесь и создавайте отличный сайт. Используйте негативное пространство, красивые цвета и хорошие дизайнерские приемы.
    2. Убедитесь, что навигация понятна, проста в использовании и не смущает пользователя.
    3. Убедитесь, что ваш сайт отзывчивый. Это помогает и пользовательскому опыту, и Google ранжировать вас выше.
    4. Везде, где вы используете изображения или элементы пользовательского интерфейса, попробуйте использовать SVG вместо JPG или PNG
    5. Проверьте, как ваша типография реагирует на изменение экрана, и убедитесь, что ваш тип отлично смотрится на всех устройствах.
    6. Если у вас есть какие-либо формы, проверьте их пару раз (как код, так и опыт, который они дают в форме ошибок и проверки).
    7. Найдите хороший план хостинга. Если вы можете найти сервер CDN, сделайте это, хотя это немного дороже.
    8. После создания веб-сайта используйте инструменты Google для веб-мастеров и PageSpeed ​​Insights, чтобы сделать его еще быстрее. Стремитесь к загрузке менее 1 секунды.
    9. Начните создавать хороший контент, который будет полезен вашим пользователям. Продолжайте делать это все время.
    10. Используйте FeedTheBot, чтобы проверять другие ошибки и сначала решать наиболее важные, но не забывайте о других.

    Заключение

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

    Что еще?
    Вы уже слышали о термине «пользовательский опыт» (или UX), но что он означает для вашего продукта?
    Прошло более трех лет с тех пор, как медиа-запросы стали стандартами W3C, но почему еще не все их приняли?
    Вак, серьезно?
    Знаете ли вы, как читается ваш сайт на мобильном телефоне или планшете?
    Как трудно это может быть?
    Вы бы подписались на рассылку, если форма требует, чтобы вы указали имя, адрес электронной почты, адрес и данные кредитной карты?
    Что еще?
    Насколько сложно было бы им с самого начала дать мне понять, что это наложение исчезнет через 10 секунд?
    Теперь, во второй части, что эти проклятые роботы Google хотят от вас?

     

    Найди свой район!

    Восточный

    Западный

    Зеленоградский

    Северный

    Северо-Восточный

    Северо-Западный

    Центральный

    Юго-Восточный

    Юго-Западный

    Южный

    Поиск:      


     
    Rambler's Top100
    © 2007 Движение «Москва без Лужкова!»