Создание SEO-дружественного сайта с нуля

1. Стандарты цифрового агентства и ожидания клиентов
2. Совместимость и отзывчивость через fullpage.js
3. Опыт пользователя превыше всего
4. Множество возможностей с SVG
5. Что тебя тормозит?
6. SEO дружественная разработка сайтов

Земля и семья. Это то, что Брэдфорд Минералз знает лучше всего.

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

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

Стандарты цифрового агентства и ожидания клиентов

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

Совместимость и отзывчивость через fullpage.js

Каждое начинание веб-дизайна - зверь. Вначале наши специалисты по UX / UI и веб-разработке берут на себя ответственность, определяя подходящую структуру веб-сайта на основе многих аспектов работы. Мы решили, что дизайн Брэдфорда потребовал вертикальной структуры прокрутки по всему сайту. Чтобы реализовать эту функцию, мы использовали fullpage.js - потрясающий инструмент, который нам нравится из-за его совместимости и отзывчивости. На их странице github, вот что такое полная страница:

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

fullPage.js полностью функционален во всех современных браузерах, а также в Internet Explorer 8, 9, Opera 12 и других старых браузерах. Кроме того, он работает с браузерами, которые поддерживаются CSS3, а с другими - нет, что делает его практически универсально совместимым. Кроме того, он обеспечивает сенсорную поддержку мобильных телефонов, планшетов и компьютеров с сенсорным экраном.

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

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

<div id = "полная страница">
<div class = "section"> Некоторый раздел </ div>
<div class = "section"> Некоторый раздел </ div>
<div class = "section"> Некоторый раздел </ div>
<div class = "section"> Некоторый раздел </ div>
</ DIV>

Реальная сила проявляется, когда структура HTML инициализируется через JQuery , Это позволяет нам легко управлять настройками, чтобы настроить внешний вид каждого полностраничного раздела. Существует множество возможностей: от установки скорости прокрутки между разделами до включения прокрутки с клавиатуры; добавление дополнительных имен классов в разделы для создания кнопок навигации; установка фиксированных элементов, которые появляются во всех разделах (таких как верхний и нижний колонтитулы), для отложенной загрузки изображений и создания параллакс-секций.

И вы можете стать еще более дотошным.

С Брэдфордом мы стилизовали тонкие детали, создавая пользовательские функции с «обратными вызовами» полной страницы. Пользовательские функции позволяли нам добавлять разные имена классов к различным элементам, а также приостанавливать или воспроизводить видео в зависимости от раздела в точке обзора.

Опыт пользователя превыше всего

Вначале я говорил вам, что WordPress расширяет возможности, потому что он продвигает общее мышление. Теперь позвольте мне проиллюстрировать как. Для Брэдфорда WordPress сыграл важную роль в создании положительного внешнего интерфейса и пользовательского интерфейса. С другой стороны, мы интегрировали Расширенные пользовательские поля (ACF) в WordPress, чтобы упростить обслуживание и обновления через простой в использовании интерфейс. Этот мощный инструмент дает редакторам массу вариантов. Для каждого раздела на полную страницу ACF позволяют бэкэнд-пользователям изменять тип содержимого, обновлять копию, менять изображения и видео и даже настраивать «Темно / светло» с помощью функции переключения. Это гибкий, масштабируемый и простой в управлении. Вот почему нам это нравится, и наши пользователи тоже.

Множество возможностей с SVG

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

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

Существует множество способов использования SVG. В настоящее время они используются только 4,9% всех сайтов , Google, Reddit, Dropbox и ESPN находятся среди этих сайтов. На Station8 мы создаем все наши сайты с SVG. Для Брэдфорда мы использовали их как изображения, так как манипуляции с CSS и Javascript и анимация не требовались.

В настоящее время ядро ​​WordPress не поддерживает SVG; мы работали над этим вопросом, используя Плагин поддержки SVG Этот плагин позволяет разработчику встраивать код файла SVG с помощью тега HTML <img />, просто добавляя к нему имя класса «style-svg».

В этой статье мы не будем вдаваться в подробности о том, как использовать SVG. Но если вы хотите узнать больше, вы можете оформить заказ Отличный учебник SVG Райана Ирелана а также Информационный справочник Джейка Гилцоффа ,

Что тебя тормозит?

Это не секрет почему важно, чтобы ваш сайт загружался быстро ,

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

На первый взгляд может показаться, что загрузка видео может быть отложена. Вы просто добавляете <preload = ”none”> в свой тег видео. Но что, если вам нужно автоматически воспроизвести видео, когда оно на экране? Поскольку атрибут preload конфликтует с атрибутом autoplay, оба не могут быть использованы. В качестве средства защиты мы использовали jQuery, создав пустой тег HTML html5 и добавив div в исходный код. Так это выглядит так:

<video id = "video2" poster = "https://www.bradfordminerals.com/wp-content/uploads/2017/10/truck.png" autoplay = "autoplay" loop = "loop" muted = ""> < / видео>
<div id = "videosrc2">
<source src = "https://www.bradfordminerals.com/wp-content/uploads/2017/10/BradfordVideo.mp4" type = "video / mp4">
<source src = "https://www.bradfordminerals.com/wp-content/uploads/2017/10/BradfordVideo.webm" type = "video / webm">
</ DIV>

Браузеры не распознают теги <source>, если они не находятся в теге <video>; тег <video> не будет работать, пока в него не будет включен тег <source>. Ваш браузер не может ничего визуализировать, пока он не связан с событием fullpage.js, а jQuery используется для помещения тегов <source> в тег <video>….

onLeave: function (index, nextIndex, direction) {
if (nextIndex == 2) {
var vidsrc = $ ('# videosrc2'). html ();
. $ ( '# Video2') HTML (vidsrc);
}
});

С нашими тремя видео огромная страница размером 7 МБ тянула нас вниз. Но, успешно отложив загрузку 2-го и 3-го видео, мы отмерили громоздкий размер и вуаля!

Конечно, есть и другие факторы, которые следует учитывать, когда дело касается скорости страниц. Хостинг, для одного. Это где WP Engine приходит для облегчения кэширования, что является очень эффективным способом оптимизации вашего сайта WordPress.

Если вы хотите работать со скоростью страницы, вы также можете использовать плагин кэширования. На Station8 нам нравится WPFastest Cache - плагин, предназначенный для уменьшения времени загрузки сайта за счет минимизации и объединения CSS, JS-файлов, кэширования в браузере и сжатия gzip. Важно отметить, что WPFastest Cache хорошо сочетается с собственной системой кэширования WPEngine в отличие от других популярных плагинов кэширования. На всех наших веб-сайтах мы отдаем приоритет скорости страниц. И вы можете проверить их Вот ,

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

SEO дружественная разработка сайтов

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

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

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

Похожие

Комментарии