Как быстро верстать сайты


Как быстро верстать сайты

Автор: Анатолий Черкес /

Дата: Опубликовано: 19 мая 2019 /

Просмотров: 2677

Здравствуйте уважаемые друзья!

Если Вы хотите знать как быстро верстать сайты и уже знакомы с HTML и CSS, то эта статья для Вас.

В данном обзоре рассмотрен классический процесс вёрстки без использования препроцессоров и различных библиотек, например, таких как Bootstrap.

Ускорение вёрстки будет происходить за счёт применения правильного алгоритма самой вёрстки.

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

Давайте сразу перейдём к делу.

Алгоритм быстрой вёрстки имеет 7 основных шагов

  1. Иметь подготовленный шаблон.
  2. Подключить нестандартные шрифты в самом начале вёрстки.
  3. Составить макет архитектуры тегов страницы.
  4. Иметь систему названий селекторов.
  5. Подготовить сразу все изображения.
  6. Вёрстку проводить по специальной схеме.
  7. Настроить скрипты и формы.

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

Подготовленный шаблон для вёрстки

Для ускорения вёрстки рекомендую каждому верстальщику иметь для этого специально заготовленный шаблон. Шаблон для вёрстки сайта представляет из себя папку с набором файлов и других подпапок. К основным файлам можно отнести:

  1. файл главной страницы сайта index.html с размеченной структурой HTML-страницы, основными первичными блоками, подключёнными файлами стилей и скриптов;
  2. файл стилей style.css – основной файл стилей со сбросом стилей и стилями для первичных блоков и меню;
  3. файл стилей media.css – файл стилей для адаптации с расставленными media-запросами и стилями адаптивного меню;
  4. файл скриптов script.js с настроенными скриптами различных блоков таких как адаптивное меню, меню аккордеон, всплывание модального окна и др.;
  5. папку images для хранения изображений;
  6. папку fonts для хранения нестандартных шрифтов;
  7. файл form.php – файл обработчик формы отправки заявки;
  8. другие файлы.

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

Минимум 5 часов времени Вы сэкономите при вёрстке каждого сайта, имея такой вот специальный макет для вёрстки.

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

Составляя данный обзор для ускорения вёрстки сайтов, я специально проводил эксперимент верстая реальный проект – главную страницу сайта маркетингового агентства.

Полную версию страницы можно посмотреть здесь.

Учитывая факт того, что дизайн был немного замороченный, и мне параллельно приходилось записывать видео вёрстки, то на вёрстку главной страницы сайта у меня ушло около 7 часов времени. Считаю это хорошим показателем. Думаю, что данный показатель можно было догнать и до 5 часов, если бы не приходилось отвлекаться на составление данного обзора. Если же Вы используете для вёрстки препроцессоры и библиотеку Bootstrap, то вполне вероятно сверстать такой сайт, имея свою заготовку для вёрстки, у Вас получится быстрее.

Подключение нестандартных шрифтов в самом начале вёрстки ускоряет процесс вёрстки

Большинству верстальщиков известна проблема кроссбраузерности нестандартных шрифтов на сайте. Одно дело подключить шрифты через сервис Google Fonts. Но этот способ не всегда приемлем. Второе дело подключить загрузку нестандартных шрифтов автономно с сайта. Вот здесь то и возникают различные траблы: то шрифт вдруг не отображается в каком-либо браузере, то в макете PSD, вы встречаете новый шрифт, который изначально не подключили. Начинаете его искать и снова подключать. А на это всё расходуется дополнительное время. Поэтому настоятельно рекомендую подключить все нестандартные шрифты на сайт в самом начале вёрскти.

Составление макета архитектуры тегов HTML-страницы ускорит Ваш процесс вёрстки минимум в 3 раза

Что такое макет архитектуры тегов страницы?

Макет архитектуры тегов страницы – это графическое отображение тегов на странице согласно дизайна.

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

Полный макет архитектуры тегов можно посмотреть здесь.

При разработке архитектуры тегов страницы необходимо учесть следующие факторы:

  • Вложенность блоков;
  • Соседство блоков;
  • Позиционирование элементов.

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

Составление макета архитектуры тегов страницы занимает около 20 минут времени, но в дальнейшем экономит от 3 до 20 часов времени на вёрстку.

Система названий селекторов

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

Система названий селекторов помогает избежать зависаний при вёрстке.

В моём случае система выглядит следующим образом: внешним тегам я задаю название логически соответствующее блоку (его содержимому), например, если это шапка, то название селектора будет header. Внутреннему блоку я задаю название внешнего блока + слово inside, т.е. внутренний блок у меня будет называться header_inside. Если внутри внутреннего блока идут два блока слева и справа, то каждый из них будет иметь соответственно следующие названия: header_inside_left и header_inside_right. В данной статье я не ставлю целью полностью расписать свою систему названий селекторов. Думаю, что смысл уловили.

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

Подготовка сразу всех изображений экономит время в процессе вёрстки

Для того, что бы не отвлекаться от самого процесса вёрстки, рекомендую произвести процесс нарезки изображений для сайта сразу. Хорошо было бы, если бы дизайнер передавал верстальщику макет PSD и уже нарезанные изображения. Но как показывает практика, в большинстве случаев верстальщик нарезает изображения с PSD сам. Да кто же лучше верстальщика это сделает? Ведь нарезка изображений должна логически ложиться в архитектуру тегов страницы.

Также рекомендую составлять спрайт изображений для всех мелких иконок и пиктограмм макета.

Проведение вёрстки по специальной схеме

Все предыдущие этапы вёрстки рассмотренные в данной статье можно назвать подготовительными. Ну а теперь давайте рассмотрим основной этап вёрстки.

Что же из себя представляет специальная схема вёрстки?

Специальная схема вёрстки предусматривает 5 шагов вёрстки:

  1. Провести расстановку тегов согласно макету архитектуры тегов.
  2. Задать селекторы классов для тегов согласно системы названий селекторов.
  3. Задать свойства тегам.
  4. Доверстать внутренние блоки.
  5. Произвести попискельное равнение всех блоков.

Выше представлена моя субъективная схема. Любой верстальщик может данную схему усовершенствовать для себя.

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

Провести расстановку тегов согласно макету архитектуры тегов

Расстановка тегов подразумевает под собой написание тегов в HTML-странице согласно макету архитектуры тегов, который был создан на 3-м этапе алгоритма быстрой вёрстки.  Делается это очень быстро, т.е. за 5-10 минут мы полностью расставляем все основные теги страницы. Рекомендуется каждому внешнему блоку задавать комментарии. Обязательно соблюдать штабную культуру вёрстки, т.е. делать соответствующие отступы для каждого дочернего тега на один tab относительно родительского тега.

Задать селекторы классов для тегов согласно системы названий селекторов

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

Задать свойства тегам

После того как у нас построена HTML-структура тегов и заданы селекторы классов, теперь в файле стилей прописываем свойства данным селекторам классов. Здесь рекомендуется выявить повторяющиеся блоки и задать им свойства в одном месте. Например, у нас заголовки h3 имеют одинаковый размер шрифта, одинаковое обрамление, то мы один раз для тега h3 прописываем соответствующие стили и они автоматически применятся для всех наших тегов h3. Чем больше одинаковых блоков Вы выявите и пропишите им сразу стили, тем больше времени сэкономите при вёрстке.

Данный этап вёрстки является наиболее трудоёмким, поскольку приходится снимать параметры с макета PSD и задавать их в файле стилей. Также приходится сверять соответствие результата дизайну и при выявлении ошибок исправлять их.

В файле стилей рекомендуется проставлять комментарии.

Доверстать внутренние блоки

На данном этапе просто верстаем те блоки, которые не были свёрстаны ранее. Можно данный этап совместить с предыдущим.

Попискельное равнение всех блоков

Что я понимаю под попиксельным равнением? Это приведение вёрстки в точное соответствие с макетом. Т.е. на данном этапе все элементы выравниваются пиксель в пиксель под дизайн. Для решения данной задачи есть различные плагины позволяющие производить точное сравнение вёрстки и дизайна. Я же пользуюсь программой прозрачности мониторов «See Through».

Настройка скриптов и форм

После того, как всё свёрстано, можно произвести настройку всех необходимых скриптов и форм отправки писем на эмайл.

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

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

Общие выводы по алгоритму быстрой вёрстки

Ну что ж друзья! В данной статье я представил свой субъективный опыт для ускорения процесса вёрстки основанный на 10-и летнем стаже. Каждый верстальщик может данный алгоритм заточить под себя.

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

Основным выводом по данной статье стоит считать строгое соблюдение всех этапов алгоритма быстрой вёрстки.

Ниже представлен видео-обзор алгоритма быстрой вёрстки.

Желаю Вам удачи и до новых встреч.

Добавить комментарий

Как быстро настроить процесс сборки для статического сайта

, Ondřej Polesný

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

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

Введение

В предыдущих статьях я объяснил, как создать динамический веб-сайт на JavaScript с контентом из безголовой CMS Kentico Cloud. Затем я показал вам, как преобразовать его в статический сайт, чтобы повысить производительность, безопасность и SEO. Итак, пришло время создать этот сайт и опубликовать его в Интернете для всеобщего обозрения.

Создание статического сайта

Каждый генератор статических сайтов позволяет создавать сайт локально, не создавая все файлы после каждого отдельного изменения файла.Если вы читали мои статьи, у вас есть сайт на Vue.js, который преобразован для использования Nuxt.js в качестве фреймворка, но по-прежнему требует сервера разработки для обработки запросов веб-сайтов. Чтобы сгенерировать статические файлы, выполните следующую команду:

  npx nuxt generate  

Откройте папку dist в корне вашего проекта, чтобы найти сгенерированные файлы, и проверьте index.html , чтобы убедиться, что ваш веб-сайт генерирует правильно. У меня есть привычка также проверять дочерние страницы, где я знаю, что есть некоторый контент с безголовой CMS, например, страница блога.Если вы видите контент в форме HTML, вы победитель!

Где разместить статический сайт?

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

Ваше текущее пространство для хостинга масштабируется в соответствии с требованиями другой системы или предназначено для поддержки определенных настроек, таких как PHP и MySQL или.NET и PostgreSQL. Так что, если это так, вы, вероятно, использовали объем трафика, сеансов и другие значения, чтобы вычислить, какой объем вычислительной мощности вам понадобится (или, как я в прошлом, просто надеялся, что все будет в порядке).

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

Хостинг

.

Как быстро создать интернет-магазин с помощью Shopify

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

Множество функций

Shopify делает его идеальным как для профессионалов, так и для новичков, и большинство людей могут создать свой магазин менее чем за день.Готовы ли вы к запуску вашего магазина? Давайте начнем.

1. Подпишитесь на Shopify

Shopify Sign Up Free Trial

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

Shopify затем задаст несколько вопросов о том, владеете ли вы уже существующим бизнесом или только начали.Чтобы перейти к основной панели инструментов, вам также необходимо будет заполнить платежный адрес.

Shopify Sign Up Questions

Как и большинство хороших вещей, Shopify не бесплатен. Вы получите 14-дневную бесплатную пробную версию, которая поможет вам настроить свой веб-сайт до того, как с вас начнут платить.По окончании пробного периода вы должны выбрать ежемесячный план в зависимости от размера вашего бизнеса. Самый простой план начинается с 29 долларов в месяц и цена (к сожалению) идет вверх оттуда.

2. Добавить товары

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

Есть два способа добавить товары в свой магазин:

  • Ввести продукты вручную.
  • Импортируйте их в файл CSV.

А пока остановимся на основах и добавим их вручную.

Основная информация о продукте

Просто введите название вашего продукта в строке Title и добавьте ключевую информацию о вашем продукте в поле Description .

Shopify Product Title Description

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

Цены и инвентарь на продукцию

Здесь вы можете добавить цену продукта.В разделе Сравнить по цене ваша цена будет отображаться с уценкой.

Shopify Product Pricing Options

Например, если вы продаете товар со скидкой за 20 долларов, а его первоначальная цена составляет 50 долларов, введите 50 долларов в поле Сравнить по цене , чтобы показать разницу в цене в вашем магазине.Вы можете использовать для продажи в своем магазине Shopify.

Если вы не хотите отображать уценку, введите то же значение в разделы Цена и Сравнить по цене .

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

Shopify Product Inventory Management

Добавление вариантов

В разделе Variants показаны различные варианты, которые могут быть у вашего продукта.Варианты могут включать в себя все, что угодно, от размера, цвета, веса и т. Д.

Допустим, я продаю белую футболку разных размеров. Я бы ввел «Размер» в поле Имя параметра , а затем добавил все параметры размера в поле Значения параметра .

Shopify Variants Sizes Example

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

Shopify Product Variant Options

Включение SEO

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

Shopify SEO Web Description

3. Создание коллекций

Как ваши покупатели могут найти товар в вашем магазине, не просматривая весь каталог? Создание коллекций значительно упрощает покупки для ваших клиентов.

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

Чтобы создать коллекцию, перейдите в меню левой боковой панели, найдите Продукты , а затем щелкните Коллекции .Как видите, Shopify уже создал для вас коллекцию под названием «Домашняя страница». Это избранные продукты, которые ваши покупатели увидят на главной странице вашего магазина. Вы хотите добавить больше коллекций, поэтому нажмите синюю кнопку Создать коллекцию .

Shopify Collections Home Page

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

Однако, чтобы Shopify мог автоматически создавать коллекции, вам нужно добавить условие. Введите определенный тег, название или поставщика, который отличает каждый продукт друг от друга.

Shopify Collections Types and Conditions

Например, если вы хотите создать коллекцию футболок, вам нужно пометить каждый продукт надписью «Футболка».

4.Выберите тему Shopify

Теперь пришло время найти подходящую тему для вашего магазина Shopify. Под заголовком Sales Channel в меню боковой панели перейдите в Интернет-магазин > Темы . Shopify начинает вас с очень простой темы под названием Дебют.

Shopify Theme Debut Example

Вам не обязательно придерживаться этой темы, поэтому прокрутите вниз и нажмите . Посетите Shopify Theme Store .Магазин тем Shopify включает как бесплатные, так и платные темы. Здесь вы можете ознакомиться с самыми популярными темами и найти тему, соответствующую вашему личному вкусу. Хотя вы можете потратить 100 долларов или больше на модную тему, Shopify предлагает бесплатные темы, которые так же хороши.

Shopify Themes Store

Найдите тот, который вам нравится? Нажмите на нее, выберите Добавить тему , и Shopify установит ее на вашу панель инструментов (но не активирует тему).

Shopify Simple Theme Themes Store

Вам нужно будет включить тему самостоятельно, поэтому вернитесь в Интернет-магазин > Темы и прокрутите вниз до раздела Дополнительные темы .Найдите имя только что установленной темы, нажмите раскрывающееся меню Action и выберите Publish .

5. Настройте свою тему

Shopify Theme Customization

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

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

Shopify Theme Customization Home Page

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

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

Shopify Theme Customization Edit Pages

6. Создайте домен

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

К счастью, Shopify делает это очень просто.Хотя вы можете найти время, чтобы изучить лучшие услуги веб-хостинга, зачем беспокоиться, когда Shopify имеет универсальный веб-хостинг и план домена? Зайдите в Интернет-магазин > Домены и нажмите Купить новый домен .

Shopify Domains Pricing Options

Введите желаемый домен, чтобы проверить, доступен ли он.Возможно, вам понадобится расширение .com, и Shopify будет взимать с вас 14 долларов в год за это.

7. Настроить платежи

Shopify дает вам довольно много вариантов, когда дело доходит до платежей.Чтобы настроить платежи, перейдите в Настройки на левой панели меню на панели инструментов и выберите Поставщики платежей .

Shopify Payment Options PayPal Amazon Pay

Вы можете использовать Shopify, PayPal и Amazon Pay или выбрать один из нескольких других способов оплаты.У каждой платежной службы есть цена - самый простой план Shopify берет 2,9% от каждой транзакции плюс 30 центов.

8. Начните работу с Shopify

Если вы прошли все эти шаги, значит, вы готовы открыть свой магазин!

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

Shopify Store Password Protection

Поздравления; Ваш магазин уже открыт!

Упрощенный Shopify

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

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

what is ftp feature Что такое FTP и зачем вам FTP-сервер?

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

Об авторе Эмма Рот (Опубликовано 185 статей)

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

Ещё от Emma Roth
Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

Подтвердите свой адрес электронной почты в только что отправленном вам электронном письме.

.

Как получить новые веб-сайты для быстрого ранжирования


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

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

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


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

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

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

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

Измените оптимизацию своей страницы. Вместо того, чтобы размещать ключевую фразу по всей странице, подумайте о том, как вы ее используете. Если заголовок страницы содержит лучших кредитных карт , подумайте об использовании чего-то вроде Сравните лучшие предложения кредитных карт в заголовке на странице h2.Обратите внимание на изменение версий ключевых слов во множественном и единственном числе. Популярные программы CMS, такие как WordPress, имеют плагины, такие как плагин тега SEO Title, которые позволяют легко изменять заголовок страницы и заголовок страницы.

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

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

Купить трафик. Если вы создаете высококачественный нишевый контент и он не занимает в рейтинге так хорошо, как хотелось бы, вам необходимо активно продвигать его. Расскажите об этом нескольким популярным блоггерам в вашей сфере и спросите, что они об этом думают. Еще один вариант мгновенного получения релевантного трафика для избранного контента - это покупка целевой рекламы. StumbleUpon продает трафик на основе категорий по 5 центов за посетителя, но этот трафик далеко не так силен, как поисковый - многие из этих посетителей приходят и уходят быстро.Вы также можете купить трафик с оплатой за клик для своего качественного контента. Если вы покупаете его для коммерческих ключевых слов, цена за клик может быть значительной, но если вы пытаетесь продвигать качественную некоммерческую тему, на которую можно ссылаться, вы можете часто привлекать посетителей из поиска и объявлений AdSense менее чем за 25 центов каждая. При использовании стратегии «покупка трафика для создания ссылок» для создания входящей ссылки могут потребоваться сотни кликов, но если учесть, насколько трудоемким и дорогостоящим является создание ссылок, то 50 или 100 долларов за хорошую ссылку могут быть выгодной сделкой.


Мнения, выраженные в этой статье, принадлежат приглашенному автору и не обязательно Search Engine Land. Здесь перечислены штатные авторы.



Об авторе

.

Настройка и тестирование AMP для WordPress: быстрое руководство из 7 шагов

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

Пользователи привыкли ожидать, что мобильные сайты загружаются так же быстро, как и их настольные аналоги. Фактически, Amazon, один из крупнейших интернет-магазинов, пришел к выводу, что даже задержка в одну секунду в скорости загрузки страницы составляет 1 доллар.6B снижение годовой выручки.

Ускоренные мобильные страницы (AMP) быстро становятся стандартом для создания быстро загружаемых страниц. Используя предварительный рендеринг, AMP могут загружаться на 15-80 процентов быстрее, чем стандартные мобильные страницы, без ущерба для функциональности. Хотя простота реализации AMP будет зависеть от вашей CMS (системы управления контентом), WordPress может быть хорошей тестовой средой для предварительного просмотра того, как может выглядеть ваша страница AMP.

Следуйте этому краткому руководству из семи шагов, чтобы включить AMP для WordPress.

Примечание: В некоторых частях этого руководства предполагается, что вы активировали плагин Yoast SEO как часть настройки WordPress. Если вы этого не сделали, вы можете просто пропустить части, которые ссылаются на этот плагин - вы все равно можете активировать функциональность AMP и без него - но я настоятельно рекомендую этот плагин, если вы серьезно относитесь к SEO для своего сайта WordPress.

Шаг 1. Установите и активируйте подключаемые модули AMP.

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

Плагин AMP автоматически генерирует AMP-совместимые версии всех ваших сообщений, которые вы можете просмотреть, добавив / amp / в конец URL-адресов ваших сообщений. Например:

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

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

  • AMP для WP - Accelerated Mobile Pages. Среди заметных особенностей этого плагина - интеграция с Google AdSense, поддержка тегов rel = canonical, конструктор страниц с перетаскиванием AMP и возможность создавать контент AMP, который отличается от контента на стандартных мобильных устройствах. страниц.
  • Glue for Yoast SEO & AMP - Одно из преимуществ использования этого плагина заключается в том, что он позволяет вам делать страницы, сообщения и мультимедийные AMP-совместимые. Плагин Glue for Yoast также без проблем гарантирует, что плагин AMP по умолчанию извлекает правильные метаданные. Подобно плагину AMP для WP, он позволяет настраивать стиль страниц AMP, и вы даже можете выбрать собственный значок и изменить внешний вид логотипа вашего веб-сайта на странице AMP. (Примечание : У вас должен быть установлен и активирован плагин Yoast SEO, чтобы он работал.)

Шаг 2. Настройте Google Analytics

Чтобы настроить страницы для отслеживания Google Analytics, вам сначала нужно найти свой идентификатор отслеживания. Войдите в Google Analytics, затем щелкните значок шестеренки в левом нижнем углу, чтобы открыть панель администратора. После того, как вы выбрали УЧЕТНУЮ ЗАПИСЬ и СОБСТВЕННОСТЬ в соответствующих раскрывающихся меню, щелкните там, где написано «Информация для отслеживания» в столбце СОБСТВЕННОСТЬ. Оттуда нажмите «Код отслеживания», чтобы увидеть свой идентификатор отслеживания - идентификатор должен начинаться с UA .

Скопируйте свой идентификатор отслеживания, затем войдите в WordPress. На левой панели навигации перейдите к AMP > Analytics и вставьте свой идентификатор отслеживания туда, где написано «Google Analytics». Затем нажмите Сохранить изменения .

Шаг 3. Настройте параметры плагина

На этом шаге я расскажу о некоторых базовых конфигурациях плагина Glue for Yoast SEO, упомянутого в шаге 1. Вы можете пропустить этот шаг, если решили не устанавливать этот плагин.

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

Для начала перейдите в Yoast SEO> AMP> Типы сообщений . Здесь вы можете выбрать, какие типы сообщений должны быть AMP-совместимыми.

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

Шаг 4. Протестируйте / подтвердите настройку AMP

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

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

Вариант 1: Тест AMP

Вариант 2: Консоль разработчика

Эта опция специально для тех, кто пользуется браузером Google Chrome.Если вы используете другой браузер (Firefox, Safari, Microsoft Edge или другой), этот параметр к вам не относится.

  • Откройте страницу AMP в своем браузере
  • Добавить # development = 1 к URL-адресу
  • Откройте консоль инструментов разработчика Chrome (в меню Chrome выберите Дополнительные инструменты > Инструменты разработки , а затем щелкните вкладку «Консоль») и проверьте наличие ошибок проверки.
  • Если все в порядке, проверка должна быть успешной.

Вариант 3: валидатор AMP

  • Перейдите на https: // validator.ampproject.org/
  • Вставьте URL-адрес AMP в поле «URL-адрес» и нажмите «Проверить».
  • Этот инструмент выделяет все ошибки и помечает их в HTML.

Примечание. Вы также можете использовать расширение AMP Validator для Chrome, чтобы увидеть те же результаты в самом URL AMP.

Шаг 5. Отправьте наиболее важные URL-адреса AMP для индексации

Если вы используете тест AMP через Google Search Console, вы можете нажать кнопку «Отправить в Google» после того, как вы запустите тест и подтвердите страницу:

В качестве альтернативы, если вы вошли в свою учетную запись Google Search Console, вы можете выполнить поиск по запросу «отправить в Google» и отправить URL-адрес прямо в результатах поиска Google:

Хотя отправка вашей AMP-страницы в Google не является обязательным требованием, Google будет индексировать вашу AMP-страницу только в том случае, если она связана с внутренней ссылкой или указана в XML-карте сайта.

Шаг 6. Просмотрите в Google Search Console для устранения ошибок

Google Search Console предоставляет возможность управлять всеми вашими AMP-страницами в одном месте.

  • Войдите в Google Search Console.
  • В разделе Search Appearance щелкните Accelerated Mobile Pages .

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

Шаг 7: Скорость тестовой страницы

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

Начните работу с AMP!

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

Последние обновления и разработки в Google AMP Project можно найти здесь.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий