10 опасных ошибок веб-дизайна, которые могут разрушить ваш SEO

1. Ошибка 1: Неспособность установить измеримые цели и измерить ваши результаты
2. Ошибка 2: не полностью протестированы все элементы дизайна
3. Ошибка 3: Не приоритезировать скорость страницы
4. Ошибка 4: Неверный размер / неоптимизированный носитель
5. Изображений
6. Ошибка 6: Изменения в структуре URL
7. Ошибка 7: Игнорирование безопасности сайта
8. Ошибка 8: неспособность проверить критически важные элементы
9. Ошибка 9: выполнение чрезмерных http-запросов
10. Мелочи складываются быстро
11. Ошибка 10: Пропуск окончательного контрольного списка запуска

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

Большинство веб-дизайнеров понятия не имеют, когда речь заходит об истинной поисковой оптимизации. Большинство считает, что пока они прикрепляют на веб-странице несколько тегов H1 и H2, атрибутов ALT изображения и мета-тегов, их работа завершена. Каждый опытный SEO-специалист знает, что это абсолютно ложно и опасно. Фактически, как только ваш веб-дизайн завершен, начинается настоящая работа.

Впервые я понял, что это было примерно в 2000 году, когда я проанализировал веб-сайт одного из моих первых клиентов. Ранее они наняли нью-йоркское рекламное агентство для разработки своего сайта. Их сайт был создан с использованием Adobe Flash и был встроен в пустую HTML-страницу. Это произошло по выгодной цене ... подожди ... всего чуть более 120 000 долларов !

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

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

Я разработал для них новый веб-сайт, который, хотя и визуально мощный, использует чистый, быстро загружаемый HTML-код, который поисковые системы могут легко сканировать. В сочетании с текущей разработкой контента и созданием ссылок, они заключили сделку на 54 миллиона долларов с крупной сетью отелей в конце того же года. (Если вы хотите более подробное объяснение того, как именно, я изложил свой процесс в недавнем посте, Доминируй свою нишу , в журнале поисковых систем.)

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

Ошибка 1: Неспособность установить измеримые цели и измерить ваши результаты

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

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

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

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

• Получите дополнительный доход в 300 000 долларов из существующих источников трафика
• Увеличение просмотров страниц за посещение на 20%
• Уменьшить показатель отказов на 20%
• Улучшение конверсии существующего веб-трафика на 15%
• Увеличить поисковый трафик на 50%

Как минимум, это означает использование Гугл Аналитика , Google Search Console , а также Инструменты Bing для веб-мастеров , Умный маркетолог также будет измерять активность в социальных сетях, входящие ссылки, PPC и показатели электронной почты. Если вы хотите максимизировать как свою эффективность, так и эффективность, вам необходимо собрать все свои данные в один сводный отчет И, выступая в качестве клиента, Raven - это идеальный инструмент, чтобы связать все воедино.

В идеале вы должны также использовать систему CRM, такую ​​как HubSpot или же Infusionsoft и настройте бухгалтерское программное обеспечение, чтобы вы могли измерять и анализировать другую важную бизнес-информацию, такую ​​как:

• Доход по каналам и кампании
• Возврат инвестиций по каналам и кампании
• Коэффициент удержания клиентов
• Продолжительность вашего процесса продаж
• Стоимость привлечения клиентов / цена за лидерство
• Коэффициент конверсии (посетитель ведет, ведет к потенциальному клиенту и потенциальному клиенту)
• Средняя ценность для клиента

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

Ошибка 2: не полностью протестированы все элементы дизайна

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

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

Это может показаться излишним, но легко сделать небольшое исправление CSS, которое в конечном итоге создает еще больше проблем. Это происходит постоянно, даже со мной.

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

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

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

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

Вот некоторые из наиболее серьезных проблем, которые могут сделать ваш сайт полностью непригодным для использования:

• Проблемы позиционирования (абсолютные, относительные и фиксированные)
• Проблемы с плавающей точкой
• Проблемы Z-индекса
• Незакрытые фигурные скобки в CSS
• Ошибки JavaScript

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

• Гугл Хром
• Fire Fox
• Microsoft Edge / Internet Explorer
• Сафари
• Как минимум одно устройство iOS и Android, но желательно два (телефон и планшет)

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

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

Ошибка 3: Не приоритезировать скорость страницы

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

Согласно исследование сделано Amazon Разница всего в 100 мс - единица времени, которую обычный человек даже не воспринимает, была достаточной, чтобы сократить свои продажи на 1%. Если эта крошечная единица времени оказывает такое прямое влияние на продажи, как вы думаете, какое влияние окажет дополнительная секунда или больше?

Так как ты создать максимально быстрый сайт ? Вы начинаете с чистого и эффективного HTML и CSS, а затем минимизируете плагины и http-запросы, оптимизируете медиа, минимизируете CSS и JavaScript и внедряете кэширование. Всегда есть место для дальнейшего улучшения.

В 2016 году эпизод вебкологии Джон Хеншоу (Jon Henshaw) поделился некоторыми из техник, которые он использовал, чтобы значительно ускорить веб-сайт Raven Tools, и достигнутые им цифры, одним словом, завидны .

В то время как я, вероятно, не пошел бы так далеко, как Джон, этот эпизод показывает, насколько далеко может завести вас немного творчества. Есть несколько методов, которые вы можете использовать, чтобы значительно повысить скорость страницы, в том числе:

• Минимизация http запросов
• Оптимизация медиа
• Уменьшить перенаправления
• Минимизация виджетов
• Использование кеширования
• Активировать сжатие
• Минимизация плагинов
• Придерживаться системных шрифтов
• Минимизация рекламных скриптов
• Использование спрайтов
• Сокращение CSS и JavaScript

Ошибка 4: Неверный размер / неоптимизированный носитель

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

В то время как системы управления контентом, такие как WordPress, предоставили огромные возможности обычному пользователю, они также создали огромные проблемы. Одна из этих проблем заключается в том, что она позволяет легко загружать и / или неоптимизированные материалы неподходящего размера.

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

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

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

Вот несколько советов по оптимизации ваших медиа:

Изображений

• Выберите идеальный формат , JPG лучше всего подходит для фотографических изображений, GIF или PNG для изображений с большими областями сплошного цвета.
• Правильный размер изображения. Если на вашем веб-сайте отображается изображение шириной 800px, использование изображения шириной 1600px не дает никаких преимуществ.
• Сожмите файл изображения. Помимо того, что Adobe Photoshop является лучшей программой для редактирования изображений, он обладает потрясающими возможностями сжатия изображений и стоит от 9,99 долл. США в месяц. Есть также бесплатные плагины WordPress, такие как Imsanity , EWWW Image Optimizer а также TinyJPG это автоматически сжимает загруженные изображения.

видео

• Выберите идеальный формат. MP4 является лучшим в большинстве случаев, потому что он производит наименьший размер файла.
• Подавать оптимальный размер (размеры) в зависимости от размера экрана посетителей.
• Устранить звуковую дорожку.
• Сожмите видео файл. Я использую Adobe Premiere большую часть времени, но Camtasia также является хорошим выбором.
• Минимизируйте длину видео.
• Загрузите видео на YouTube и / или Vimeo и используйте их встроенный код iframe.

Ошибка 5: не расставлять приоритеты адаптивного дизайна

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

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

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

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

Ошибка 6: Изменения в структуре URL

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

Редизайн сайта не всегда приводит к необходимости изменения структуры URL, но когда переход от статического HTML-сайта к CMS, такой как WordPress обычно это неизбежно. Большинство веб-сайтов могут извлечь выгоду из реализации иерархической структуры URL-адресов, и реорганизация является идеальным временем для этого. Ключ заключается в том, чтобы идентифицировать все текущие страницы на вашем веб-сайте и осуществить перенаправление 301 на новое местоположение каждой страницы.

Такие инструменты, как Screaming Frog, устранят большую часть трудоемкости, создав список страниц, которые можно просмотреть на вашем веб-сайте, которые затем можно вставить в файл .htaccess . Затем вы просто добавляете необходимую информацию, чтобы сообщить ботам и браузерам, куда переходить на каждую новую страницу, как таковую:

Redirect 301 /old-page-1.html https://your-domain.com/new-page-1/
Redirect 301 /old-page-2.html https://your-domain.com/new-page-2/
Redirect 301 /old-page-3.html https://your-domain.com/new-page-3/

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

Ошибка 7: Игнорирование безопасности сайта

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

• Перехватить конфиденциальные данные
• Заражать другие компьютеры вирусами и / или вредоносным ПО
• Вставить ссылки на другие сайты
• Развлекайся

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

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

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

Итак, как нам правильно защитить наш сайт?

По правде говоря, невозможно полностью обезопасить сайт. Если он в сети, его можно взломать. Это просто вопрос времени и ресурсов. Вот почему большинство компьютеров в ЦРУ и АНБ не подключены к Интернету.

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

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

• Не используйте имя пользователя по умолчанию
• Ограничьте wp-admin вашим IP-адресом
• Реализовать двухфакторную аутентификацию
• Ограничить попытки входа
• Уменьшить плагины
• Постоянно обновляйте ядро ​​и плагины WordPress

Ошибка 8: неспособность проверить критически важные элементы

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

• Контактные формы - проверьте все параметры формы и отправьте тестовое представление, чтобы подтвердить, что все необходимые получатели получают соответствующее сообщение со всей применимой информацией и что оно правильно отформатировано.
• Настройки сканирования. Во время разработки обычно настраивают WordPress для блокировки роботов поисковых систем, чтобы не создавать дублирующиеся проблемы с контентом. После миграции на действующий сервер вам нужно убедиться, что все, что вы хотите в результатах поиска, не заблокировано. Это простой вопрос проверки ваших настроек WordPress и ваших файлов robots.txt.
• Электронная торговля. Вам следует выполнить несколько транзакций в тестовом режиме, чтобы убедиться, что ваша система электронной торговли работает правильно, особенно если у вас есть несколько атрибутов продукта, сложные правила доставки или продукты с широкими возможностями настройки. Не останавливайтесь на тестовой транзакции. Мне всегда нравится запускать хотя бы одну живую транзакцию, чтобы убедиться, что все работает именно так, как должно. Вы всегда можете аннулировать это впоследствии.

Ошибка 9: выполнение чрезмерных http-запросов

Каждый http-запрос увеличивает время загрузки ваших страниц. Это включает в себя сценарии, файлы CSS и изображения. Вы можете не думать, что у вас их столько, но я готов поспорить, что вы удивитесь, когда посмотрите на 1) отрендеренный код; 2) все изображения, которые встроены; 3) все ваши плагины и виджеты; и 4) все скрипты отслеживания и показа рекламы, которые вы используете.

Мелочи складываются быстро

Задолго до того, как большинство из вас были в индустрии цифрового маркетинга, и даже до того, как многие из вас родились, большинство людей подключалось к Интернету через модемы. В то время большинство соединений имели пропускную способность 56 Кбит / с, что означало, что каждое отдельное изображение значительно увеличивало время загрузки страницы. Обычно средняя загрузка веб-страницы длилась 30 секунд или более. Чтобы компенсировать это, мы разбили бы изображения на более мелкие части, чтобы веб-страница могла отображаться постепенно, а не ждать загрузки одного большого изображения.

Сегодня большинство из нас наделены широкополосной связью. Интернет-соединение 3G на вашем мобильном устройстве в семьдесят один раз быстрее, чем самое быстрое соединение, которое было доступно во время коммутируемого соединения и дней ISDN. В результате люди стали небрежными. Они перешли от попыток сохранить целую веб-страницу размером менее 100 КБ до времени, когда одно фоновое изображение может иметь размер более 100 КБ. Многие люди думают, что нам больше не нужно беспокоиться о таких банальных вещах, как размер изображения, но это просто неправда.

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

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

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

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

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

Крис Койер делает большую работу объясняя, как именно реализовать спрайты CSS над трюками CSS.

Это не заканчивается изображениями, хотя ...

Многие плагины WordPress загружают как минимум один файл JavaScript и CSS. Некоторые загружают несколько из каждого. Предположим, у вас есть всего 5 плагинов, каждый из которых загружает только один дополнительный файл JavaScript и CSS - это дополнительные 10 запросов HTTP !

Если вы хотите увидеть, насколько плохим он может быть, вот фрагмент кода из заголовка сайта, который был недавно отключен из-за нагрузки, которую он поместил на ЦП. Хуже всего то, что это изображение отображает только около трети файлов JavaScript и CSS, загруженных на каждой странице этого сайта!

Каждый социальный виджет, такой как удобный плагин для страницы Facebook, который вы видите на большинстве сайтов, загружает внешний файл JavaScript. (Что даже хуже для скорости страницы, чем внешний файл JavaScript, который находится на вашем собственном сервере.)

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

Ошибка 10: Пропуск окончательного контрольного списка запуска

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

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

Вот некоторые вещи, которые должны быть в вашем окончательном контрольном списке запуска:

• Допустимый HTML / CSS
• Кросс-браузерная совместимость
• Протестировано на нескольких устройствах
• Отображение меню и функциональность
• Неработающие ссылки
• 301 переадресация
• Недостающие страницы / 404 ошибки
• .htaccess
• Robots.txt
• Настройки сканирования WordPress
• Sitemaps
• Скорость страницы
• Кэширование
• Адаптивный дизайн
• Формы (контактные формы, формы подписки по электронной почте и т. Д.)
• Функциональность электронной коммерции
• Кнопки социальных сетей
• Интерактивные элементы
• мультимедиа
• Favicon
• Титулы
• Мета описания
• Alt атрибуты
• аналитика
• Консоль поиска Google / Инструменты Bing для веб-мастеров
• Тег ремаркетинга / пиксель Facebook
• Минимизированный HTML, CSS и JavaScript

Спасибо что подписались!