HTML & CSS: что нужно знать SEO?

1. Что такое HTML?
2. Что такое CSS?
3. Что такое JavaScript?
4. «Хорошо, черт. Это проще, чем я думал.
5. HTML, чтобы усвоить навсегда
6. HTML для блогов
7. Еще больше тегов, которые вы должны знать
8. Congrats!
9. Что такое таблица стилей CSS?
10. Boom.

Наша коммерческая группа Artmisto.net

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

Вам действительно не нужно знать много кода, чтобы быть SEO-аналитиком.

НО, вы станете в миллиард раз лучше в своей работе, приложив усилия, чтобы понять, что такое HTML, CSS и JavaScript и как каждый из них интерпретируется поисковыми системами. Вам не нужно быть веб-разработчиком или даже свободно говорить на каком-либо языке программирования, чтобы быть хорошим SEO-аналитиком; но не забывайте, знание это сила. Чем больше ты знаешь, тем лучше ты будешь. Не только потому, что вы сможете сказать, на что вы смотрите, но и потому, что знание наиболее важных понятий и тегов может помочь вам поговорить с вашим (скорее всего) ужасающий разработчик * не чувствуя себя дураком.

* Отказ от ответственности: Мэтт является исключительно приятным разработчиком

Давайте начнем с основ: что это за слова?

Что такое HTML?

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

Что такое CSS?

CSS, или каскадные таблицы стилей , является оболочкой веб-сайта. Это позволяет детально контролировать стиль, шрифты и в основном все визуальные аспекты веб-сайта. Без CSS ваш сайт выглядел бы как сайт Vulfpeck (из предыдущего примера). Как правило, глобальный CSS записывается в такие элементы стиля, как верхний и нижний колонтитулы, навигация, а иногда даже сам текст. Таким образом, наилучшей практикой является обеспечение того, чтобы весь общий CSS содержался в одной таблице стилей. Когда вам нужно стилизовать уникальные предметы, такие как блог сообщение, командная страница , или же насчет нас страница, отдельные таблицы стилей могут быть использованы для каждой страницы в сочетании. Это позволяет повысить скорость страниц, не заставляя поисковые системы сканировать тонны ненужных строк кода стиля для каждой страницы вашего сайта.

Что такое JavaScript?

Представьте себе JavaScript (не путать с Java, который является совершенно отдельным животным) в качестве мышц, сухожилий и связок, которые позволяют телу фактически двигаться и делать классные вещи. JavaScript можно использовать для самых разных целей, включая галереи изображений, динамические макеты, игры и даже уникальные ответы на странное поведение пользователей. Поскольку мы сфокусировали этот пост на основах HTML и CSS для SEO, мы не будем слишком сильно фокусироваться на JavaScript. Мы хотим отметить, что JavaScript и Google по большей части хорошо играют вместе, но есть гораздо более глубокие технические подробности того, как JavaScript влияет на SEO, и мы не будем здесь вдаваться в подробности. Самая важная вещь, которую нужно помнить, - это избегать загрузки контента вашего сайта через JavaScript. Если это важно, убедитесь, что он находится в скелете вашего сайта, а не в коде JavaScript.

«Хорошо, черт. Это проще, чем я думал.

Мы абсолютно преувеличиваем, но вы все равно должны понять. HTML - это вся информация на сайте, включая контент и метаданные (данные о данных). CSS делает его красивым и уникальным. JavaScript заставляет делать удивительные вещи.

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

HTML, чтобы усвоить навсегда

Давайте разберемся с этим немного.

Код, независимо от языка, всегда будет использовать как открывающий, так и закрывающий тег. В HTML это происходит несколькими способами, как показано выше. Чтобы упростить задачу, мы будем рассматривать каждый элемент по одному, начиная с нашего тега <HTML>, который как SEO Скорее всего, вы никогда не будете писать. Он используется буквально только для того, чтобы объявить, что все между открытием и закрытием </ HTML> написано на HTML. Это на самом деле просто.

Теперь вы можете подумать: « А как же мой JavaScript и CSS? »

Успокойся.

Мы добираемся туда.

Давайте разберемся со вторым тэгом: тэг head. Между открывающим тегом <head> и закрывающим </ head> (примечание: обратная косая черта перед «заголовком» указывает на закрывающий тег) находятся такие важные вещи, как заголовок страницы, мета-описание, канонические теги, таблицы стилей, и даже информация JavaScript или коды отслеживания. Самое главное, что именно здесь все метаданные хранятся для сайта.

Возможно, вы также заметили что-то, что может немного сбить с толку: тег rel = »« tag. Этот тег HTML используется для описания отношений между страницей HTML и другими конкретными ресурсами. Это может использоваться различными способами, такими как канонические теги, связывание листов CSS и предоставление дополнительных директив поисковым системам, такими как nofollow, prev / next и даже альтернативный. Альтернативный тег является ключевым при оптимизации для международных клиентов, потому что здесь мы обозначаем языки и регионы, на которые нацелены эти «альтернативные версии» страниц, чтобы наиболее релевантная версия страницы всегда предоставлялась пользователю. Это становится очень сложно и немного выходит за рамки этого поста.

В нашем разделе заголовка примера вы увидите некоторые наиболее важные элементы в HTML для поисковой оптимизации. Это:

1. Тег заголовка - это буквально заголовок вашей страницы. Это то, что всплывает как синяя ссылка в обычных результатах поиска. Это сильно взвешенный сигнал, и этот конкретный тег может быть сильно коррелирован с успехом и провалом ранжирования.
2. Описание мета - этот бит информации находится прямо под заголовком страницы в нашем предыдущем примере. Хотя это не является прямым фактором ранжирования, мета-описание сильно влияет на рейтинг кликов, так как это часть информации под синей ссылкой в ​​результатах обычного поиска.
3. Канонический тег - Канонический тег может быть чрезвычайно запутанным для новых оптимизаторов. Об этом можно многое сказать, но просто знайте, что по сути то, что вы делаете, когда используете его, объявляет предпочтительную версию страницы. Если это оригинальная страница, она будет ссылаться на себя; в противном случае он может указывать на другую страницу, чтобы отдать ей должное, уменьшить дублирование или избежать плагиата. Это работает аналогично тегу link rel = ”stylesheet”, с той лишь разницей, что последний определяет отношения между вашим HTML-скелетом и оболочкой CSS, а не отношения между страницами.

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

HTML для блогов

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

В наши дни большинство веб-сайтов легко управляются с помощью редактора WYSIWYG («Что видишь, то и получаешь»). WYSIWYG-редакторы великолепны, но они не обеспечивают контроль над вашим сайтом и контентом, как вы, возможно, захотите. Вот тогда вы действительно захотите войти и использовать текстовый редактор. Ниже вы найдете некоторые из самых полезных элементов в HTML, когда речь идет о формировании вашего блога или контента.

Итак, начнем с тега <body>. Здесь ваш контент будет жить 100% времени. Иногда вы даже можете найти здесь некоторые фрагменты отслеживания, но лучший способ думать об этом состоит в том, что хотя <head> содержит ценную информацию для поисковых систем , именно <body> содержит ценную информацию для пользователей .

Большую часть времени - если вы не работаете над странной CMS или не имеете специального кода для реализации - вам редко когда-либо придется управлять самим тегом <body>. Вместо этого вы будете иметь дело с каждым другим тегом, который вы видите в этом разделе.

Давайте посмотрим на все между открывающим и закрывающим тегами <body>.

<div> </ div>: Хорошо, я признаю. Это тоже сбивает с толку. Видите, div используются для организации и обычно содержат большой блок кода, который вы хотели бы оформить таким же образом. Вот подвох: вы можете поместить span внутри div и дать им уникальный идентификатор. Затем стилизация div повлияет на диапазон, но позволит вам сохранить гранулярный контроль.

<span> </ span>: сбивающая с толку часть: span также используются для организации. Опять же, все, что вам нужно сделать, это назначить идентификатор (<span id = ”example”> </ span>), и его легко можно использовать в CSS для стилизации. Есть еще много информации о различиях между div и span, но, честно говоря, пока вы не пишете сайты вручную, вам не нужно беспокоиться.

<h1> </ h1>. Ваш H1, или первый заголовок, является наиболее выделенным фрагментом текста на странице. Это будет самый большой текст по умолчанию. Теги заголовка в HTML работают иерархически, то есть теги H2 имеют меньший вес, чем тег H1 с точки зрения поисковой системы, и будут вторым по величине текстом на вашем сайте. Это несет весь путь вниз. Главное, что следует помнить с тегами заголовка, - это всегда использовать их в иерархическом порядке для дальнейшего объяснения тем и подтем страницы.

<strong> <h2> </ h2> </ strong>: Хорошо, хорошо, что вы меня поймали. Это на самом деле два тега вместе взятые. <strong> - это тег, который используется - если вы можете в это поверить - сделать текст жирным . Вот и все. Тег H2 является тогда подзаголовком под нашим тегом H1. Это обычно используется для дальнейшего расширения подтем в рамках темы H1.

<p> </ p>: Аааа, все важные теги P или абзаца. Почти 95% времени ваш контент будет записан внутри тега <p>. Исключениями являются только ваши теги заголовков.

<ol> </ ol> & <ul> </ ul>: теги OL и UL можно использовать взаимозаменяемо, в зависимости от того, как вы хотите оформить свои списки. Смотрите, эти теги относятся к списку ORDERED и списку UNORDERED. Таким образом, O & U L. В любом случае теги <li> </ li> будут обтекать каждый элемент в упорядоченном списке, чтобы создать нумерованный список, и каждый элемент в неупорядоченном списке, чтобы создать маркированный список.

<em> </ em>. Считается, что тег em обеспечивает выделение термина путем стилизации текста внутри тега курсивом . Вот и все. Простой способ выделить ваш контент в HTML.

<img src = ”” alt = ”” />: тег img src - один из немногих, который имеет смысл, просто читая тег. Это объявляет источник изображения, которое вы хотели бы использовать. Используйте тег alt, чтобы описать поисковым системам и программам чтения с экрана то, что на самом деле показывает изображение. Помните, что поисковые системы по-прежнему не могут видеть фотографии, поэтому использование тега alt помогает обеспечить некоторый контекст для ботов при сканировании изображений на странице.

<a rel= договорnofollowtakte href= договорhttp://www.url.com/ книгой> ЯКОРНЫЙ ТЕКСТ </a>: Я знаю, здесь есть кривая. Я надеюсь, что вы были готовы. Смотрите, без rel = ”nofollow” (упоминалось выше), это просто стандартный тег ссылки. Бит rel = ”nofollow” указывает поисковым системам, что вы не хотели бы передавать какие-либо ссылки на связанный сайт. Остальная часть тега обозначает страницу, на которую вы хотите сослаться, и текст, который пользователи видят связанным с этой страницей, который называется текстом привязки.

Еще больше тегов, которые вы должны знать

<a href= договорhttp://www.url.com/abilities target=не_blanktially> ЯКОРНЫЙ ТЕКСТ </a>. Теперь вы должны понимать, как выглядит ссылка в HTML. Разница в том, что эта цель = «_ blank» открывает ссылку на новой вкладке, что может быть полезным, поскольку вы избегаете указания пользователям покидать ваш сайт. Вместо этого вы облегчаете им переход к соответствующей ссылке, не покидая страницу.

<a href = ”# jumplink”> ЯКОРНЫЙ ТЕКСТ </a>. Многие длинные посты в блоге (кроме этого) содержат оглавление, которое обычно помечается активными ссылками. При щелчке по этим ссылкам вы переходите вниз на страницу к определенному разделу. Это называется переходной ссылкой, и она состоит из двух частей: реальной ссылки (ссылка видна выше) и конкретного элемента, к которому вы хотите перейти. Этот элемент должен быть назван с использованием готового идентификатора. Как только это будет сделано, просто установите идентификатор, по которому URL будет идти в теге <a href>, и все готово. Имейте в виду: иногда это не совсем точно и, в зависимости от размещения, может немного отскочить от того места, где вы хотите быть.

</ br>. Многие люди склонны использовать & nbsp; сделать разрывы строк в содержании. Если вы читаете это и делаете это сейчас, ПОЖАЛУЙСТА, ОСТАНОВИТЕСЬ. Просто используйте </ br>. Это намного проще, межстрочный интервал иногда более идеален и даже не требует закрывающего тега.

<tagname style = ”свойство: значение; свойство: значение; свойство: значение; свойство: значение; свойство: значение;»>:
Поэтому, хотя мы никогда не будем рекомендовать использование встроенного стиля с HTML, мы признаем, что вам нужно хотя бы увидеть пример того, что вы не должны делать. Поэтому, пожалуйста, если вы видите это на своем сайте, убейте его огнем. Поисковым системам это не нравится, и, используя идентификатор или тег класса для обозначения раздела, который вы хотите стилизовать, вы можете легко выполнить то же самое в CSS без притока встроенного кода. О, мы упоминали, что это помогает скорости сайта сделать это?

Congrats!

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

Теперь поговорим о CSS.

Что такое таблица стилей CSS?

Таблица стилей определяет, как должен выглядеть HTML. Именно здесь происходит выбор шрифта, цветов фона, размеров изображения и всех важных мер предосторожности, связанных с мобильностью. Он определен в заголовке HTML тегом rel (ссылка ниже).

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

Так как мы установили id = ”navigation”, теперь мы можем стилизовать это, написав следующий CSS:

Если вы хотите вместо этого объявить блоки HTML по классу, просто замените «ID» на «CLASS»:

и измените свой CSS на:

Boom.

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

Очевидно, вы знаете лучше, чем это, хотя.

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

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

У вас есть вопросы? Комментарий ниже и дайте нам знать!

Похожие

Комментарии