Как оценить верстальщика в SEO-верстке

Приветствую вас, дорогие друзья. Сегодняшняя тема “Как оценить верстальщика в SEO-верстке”. Поговорим немного о SEO-верстке и, как не профессиональному технарю потребовать что-то от профессионала и тем самым, оценить его профессиональность.

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

  • главной страницы;
  • страницы рубрик;
  • тегов, если эта страница отличается от страницы рубрик;
  • и страницы отдельных публикаций.

То есть, все страницы, которые визуально отличаются друг от друга, должны быть проверены в walidator.w3.org. Кроме этого, вы должны потребовать наличие “микроразметки хлебных крошек”, и вы можете проверить эту микроразметку сервисами Гугла https://search.google.com/structured-data/testing-tool и Яндекса https://webmaster.yandex.ru/tools/microtest/.

Разметка Гугл

В Гугле при проверке микроразметки страницы отдельных публикаций, присутствует два вида разметки. Первый — микроразметка “article” и второй — “breadcrumb”, это и есть “хлебные крошки”.

В разметке “article” на моем сайте присутствуют ошибки. Вы можете требовать от мастера дополнительно устранение этих ошибок.

По поводу “breadcrumb”. Сейчас я предпочитаю размечать “хлебные крошки” не при помощи “breadcrumb”, а при помощи “breadcrumb list”. И внутри них складывать уже эти “breadcrumb”. Ну, в принципе можно размечать “хлебные крошки”, как отдельные именно “breadcrumb”. Главное, чтобы здесь не было ошибок.

Итак, вы можете убедиться в том, что, во-первых, микроразметка присутствует, а во-вторых — она не содержит ошибок.

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

Кроме всего прочего, в коде должны присутствовать семантические теги “header”, “article”,”aside”, “footer”, “nav”. Давайте посмотрим.

Например, в теме от Гудвина. Вот его одна из свежих тем, которая называется Меридиан. Я подниму инспектор кода и посмотрю, что у меня здесь есть. Например, шапка не размечена тегами. Зайдем в тело и посмотрим, что у нас с меню. Меню у нас не размечено тегами.

И теперь, давайте еще, к примеру, посмотрим на тему MFS. Тоже посмотрим на шапку. Здесь присутствует тег “header”, но меню не размечено тегами. То есть так, относительно лучше, чем у Гудвина, но хуже, чем должно быть. Потому, что теги “nav” тоже должны присутствовать. Наличие этих семантических тегов разметки говорит о том, что верстальщик идет в ногу со временем и применяет современные стандарты верстки сайтов.

Заголовочные теги применяются при верстке только текстовых блоков. Посмотрим, что имеется в виду. Снова вернемся на сайт с темой Гудвина и посмотрим, каким образом сверстан логотип. В логотипе применяются теги “H1”. Также, заголовочные теги применяются в разных других элементах сайта.

Но, на самом деле, они должны применяться только в текстовом блоке, то есть на странице отдельной публикации заголовок “H1” должен быть. Внутри самой публикации должны быть заголовки “H2”, “H3”.

А также, внизу, если на главной странице присутствует текстовый блок, у него может быть заголовок “H1”. У всех иных заголовков на сайте, например, в сайдбаре у виджетов, не должно быть заголовков “H1”, “H2” и так далее. Потому что это все будет сбивать с толку поисковик. Потому что это все — семантические теги. Это не просто блоки, это семантические теги, это очень важно понимать, потому что они несут в себе физическую нагрузку, это заголовки.

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

Семантичность

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

Например, каким образом сложен логотип у Гудвина? Вообще, есть шапка, которая должна быть телом. Внутри нее лежит тег, оборачивающий логотип, и внутри него еще, зачем-то, лежит “H1”.

То есть, если он так уж хотел применять “H1”, то достаточно было его разместить на уровне верхнего тега и убрать еще одну вложенность. Никакого смысла вкладывать один тег в другой, в данном случае, я не вижу. И теперь, давайте посмотрим, как логотип сверстан в теме MFS.

Кликаю по логотипу и вижу, что здесь картинка, при этом у картинки не прописан “alt”.

То есть, само свойство “alt” картинки задано, но оно пустое. И это тоже не хорошо. И теперь вот, теги-обертки: один, второй, третий, четвертый, пятый. 5 тегов обертки — это уже слишком. Потому, что в данном случае я бы сверстал это следующим образом: я бы положил один “div”, а внутри бы написал “Средиземье.ру”. И все остальное я бы уже сделал на стилях.

Соответственно, вот такая глубина вложенности — это очень уже нехорошо. Это говорит о том, что верстальщик недостаточно опытен или просто не знает, как можно это сделать правильно. Не прописанный “alt” говорит о халатности и, например, если сосредоточить свое внимание на теме от Гудвина, посмотреть, как сверстан этот логотип, то он тоже сверстан не семантично.

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

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

Это все важно, это все будет влиять на SEO продвижение данного сайта. Но, как видите, понять, насколько чистая верстка и симпатичная, не так и просто. Я постарался на примере вам объяснить, на что важно обращать внимание.

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

И еще один момент — это то, что в теме должны быть показатели Google PageSpeed достаточно высокими. Что значит достаточно высокими? Все познается в сравнении. Например, на уроке который я давал про ускорение сайта, вы сможете проделать все эти пункты, установить тему Marafon и просмотреть, cколько “попугаев” дает она.

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

На этом все, дорогие друзья. До встречи на новых уроках.

1 Star2 Stars3 Stars4 Stars5 Stars (1 голосов, в среднем: 5,00 из 5)
Загрузка...

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *