HTML & CSS: Що потрібно знати для SEO?

1. Що таке HTML?
2. Що таке CSS?
3. Що таке JavaScript?
4. - Ну, да. Це простіше, ніж я думав. "
5. HTML засвоїти назавжди
6. HTML для блогів
7. Ще більше тегів ви повинні знати
8. Вітаємо!
9. Що таке таблиця стилів CSS?
10. Бум.

Як люди починають входити в поле, вони часто задаються питанням, скільки кодів вони насправді повинні знати, щоб бути аналітиком SEO. І вгадайте, що?

Вам дійсно не потрібно знати багато коду, щоб бути аналітиком SEO.

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

* Відмова від відповідальності: Matt є надзвичайно приємним розробником

Давайте почнемо з основ: які ці слова?

Що таке HTML?

HTML або Hypertext Markup Language можна вважати скелетом веб-сайту. Це код, що містить вміст і метаінформацію, яку використовують пошукові системи, щоб зрозуміти, що таке веб-сайт. Веб-сайт, написаний на чистому HTML, не буде виглядати так чудово, але він буде швидким, швидше за все, оптимізованим для органічного пошуку і реагуючим (оптимізований для мобільних пристроїв). Наприклад, музикант Вульфпека Веб-сайт повністю написаний і оформлений у форматі HTML. Це винятково баребовий сайт, і це тому, що HTML - саме це - основи сайту. Для того, щоб зробити його досить, ви хочете дізнатися деякі CSS.

Що таке CSS?

CSS або Cascading Style Sheets - це шкіра веб-сайту. Вона дозволяє детально контролювати стиль, шрифти і в основному всі візуальні аспекти веб-сайту. Без 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> (примітка: зворотна риса перед "головою" вказує на закриваючий тег), ви знайдете такі важливі речі, як заголовок сторінки, мета-опис, канонічні теги, таблиці стилів, і навіть дані JavaScript або коди відстеження. Найголовніше, що всі метадані зберігаються для сайту.

Можливо, ви також побачили щось, що може трохи заплутати: тег link rel = ”“. Цей тег HTML використовується для опису взаємозв'язку між HTML-сторінкою та іншими певними ресурсами. Це можна використовувати різними способами, такими як канонічні теги, зв'язування CSS-листів і надання додаткових директив пошуковим системам, наприклад, nofollow, prev / next, і навіть alternate.The альтернативний тег має вирішальне значення при оптимізації для міжнародних клієнтів, оскільки тут ми позначаємо мови та регіони, на які спрямовуються ці "альтернативні версії" сторінок, так що найрелевантніша версія сторінки завжди подається користувачеві. Це стає дуже складно і трохи виходить за рамки для цієї посади.

Всередині нашого прикладу головний розділ, ви побачите деякі з найбільш важливих елементів в HTML для пошукової оптимізації. Це:

1. Тег заголовка - це буквально назва вашої сторінки. Це те, що з'являється як синя посилання в органічних результатах пошуку. Це сильно зважений сигнал, і цей конкретний тег може бути дуже корельований з успішним рейтингом і невдачею.
2. Meta Description - Цей біт інформації знаходиться безпосередньо під заголовком сторінки в нашому попередньому прикладі. Хоча це і не є прямим фактором ранжування, мета-опис сильно впливає на показники кліків, оскільки це трохи інформації нижче синього посилання в органічних результатах пошуку.
3. Канонічний тег - канонічний тег може бути надзвичайно заплутаним для нових SEO. Про це можна багато чого сказати, але просто знайте, що, по суті, те, що ви робите під час її використання, оголошує бажану версію сторінки. Якщо це оригінальна сторінка, вона буде самостійною. якщо ні, то це може вказувати на іншу сторінку, щоб надати йому кредит, зменшити дублювання або уникнути плагіату. Це працює подібно до тегу link rel = ”stylesheet”, що відрізняється тим, що останній визначає зв'язок між вашим HTML-скелетом і шкірою CSS, на відміну від відносин між сторінками.

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

HTML для блогів

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

Більшість сайтів у ці дні легко маніпулюються за допомогою редактора WYSIWYG (що ви бачите, що ви отримуєте). WYSIWYG редакторів великі, але вони не забезпечують контроль над вашим сайтом і вмістом, як ви, можливо, захочете. Ось тоді ви дійсно захочете потрапити і використовувати текстовий редактор. Нижче ви знайдете деякі з найбільш корисних елементів у форматі HTML, коли йдеться про формування вашого блогу або вмісту.

Отже, почнемо з тегу <body>. Тут ваш вміст буде проживати 100% часу. Іноді ви навіть знайдете деякі фрагменти відстеження, але найкращим способом подумати про це є те, що хоча <head> містить цінну інформацію для пошукових систем , це тіло, яке містить цінну інформацію для користувачів .

Велику частину часу - якщо ви не працюєте над дивною системою керування контентом (CMS) або маєте власний код для реалізації, вам рідко доведеться керувати тегом <body>. Замість цього ви будете мати справу з кожним іншим тегом, який ви бачите в цьому розділі.

Давайте поглянемо на все між тегами відкриття та закриття <body>.

<div> </div>: Добре, я визнаю. Це також заплутує. Див., Divs використовуються для організації та зазвичай містять великий блок коду, який ви хочете створити таким же чином. Ось улов: ви можете розмістити проліт всередині div і дати їм обидва унікальний ідентифікатор. Потім стилізація div впливає на проміжок, але дозволить вам зберегти детальний контроль.

<span> </span>: Заплутана частина: також використовуються прогалини для організації. Знову ж таки, все, що вам потрібно зробити, це призначити ідентифікатор (<span id = ”приклад>> </span>), і його можна легко назвати в CSS для укладання. Існує набагато більше, щоб знати про відмінності між divs і проміжками, але, чесно кажучи, до тих пір, поки ви не будете кодувати сайти, вам не потрібно бути зацікавленими.

<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 href=forhttp://www.request.com/forum"> ЯКОВИЙ ТЕКСТ </a>: Я знаю, тут є кривий м'яч. Сподіваюся, ви були готові. Див., Без rel = ”nofollow” (згаданого вище), це лише стандартний тег посилання. Біт rel = ”nofollow” диктує пошуковим системам, що ви не хотіли б передавати будь-який зв'язок на пов'язаний сайт. Решта тегів визначає сторінку, на яку ви хочете зв'язатись, і текст, який користувачі бачать, пов'язані з цією сторінкою, який називається прив’язним текстом.

Ще більше тегів ви повинні знати

<a href="http://www.url.com/” target=”_blank”> ЯКОВИЙ ТЕКСТ </a>: тепер ви зможете розпізнати, як виглядає посилання у HTML. Відмінність полягає в тому, що ця мета = "_ blank" відкриває посилання на новій вкладці, що може стати перевагою в тому, що ви не будете наводити користувачів на вихід з вашого сайту. Замість цього ви робите їх простим переходом до даного посилання без необхідності залишати сторінку.

<a href = "# jumplink"> ЯКОРКОВИЙ ТЕКСТ </a>: багато довгих повідомлень у блозі (не цей) містять зміст, який зазвичай позначений активними посиланнями. При натисканні ці посилання традиційно перескакують вам вниз по сторінці до певного розділу. Це відоме як посилання для переходу, і воно вимагає двох частин: фактичне посилання (посилання наведено вище) і конкретний елемент, до якого потрібно перейти. Цей елемент потрібно буде називати, використовуючи ідентифікований ідентифікатор. Як тільки це буде зроблено, просто встановіть ідентифікатор, в якому URL перейде в тезі <a href>, і ви закінчите. Будьте обережні: це не найточніший час, і, залежно від місця розташування, може трохи підскочити з місця, де ви хочете бути.

</br>: Багато людей прагнуть використовувати & nbsp; щоб зробити розриви рядків у змісті. Якщо ви читаєте це і робите це зараз, будь ласка, припиніть роботу. Просто використовуйте </br>. Це набагато простіше, міжрядковий інтервал є більш ідеальним часом, і навіть не вимагає закриття тегу.

властивість: значення; властивість: значення; властивість: значення; властивість: значення; властивість: значення; ">:
Отже, хоча ми ніколи не рекомендуватимемо використовувати вбудований стиль з HTML, ми визнаємо, що вам потрібно принаймні побачити приклад того, чого ви не повинні робити. Тому, будь ласка, якщо ви бачите це на вашому сайті, вбийте його вогнем. Пошуковикам це не подобається, і, використовуючи ідентифікатор або тег класу для позначення розділу, який ви хочете створити, ви можете легко виконати те ж саме в CSS без припливу вбудованого коду. О, ми згадали, що це допомагає швидкості сайту зробити це?

Вітаємо!

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

Тепер давайте поговоримо про CSS.

Що таке таблиця стилів CSS?

Таблиця стилів є тим, що диктує, як HTML дійсно повинен з'явитися. Тут відбувається вибір шрифту, кольори фону, розміри зображень і всі важливі запобіжні заходи для мобільних пристроїв. Вона визначається в голові HTML з тегом rel rel, який можна побачити нижче.

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

Оскільки ми встановлюємо id = ”navigation,” тепер ми можемо стилізувати це, написавши наступний CSS:

Якщо ви хочете замість того, щоб оголосити HTML-блоки за класом, просто замініть "ID" на "CLASS":

і змініть свій CSS на:

Бум.

Ми зараз (погано) оформили нашу навігацію. У багатьох випадках вам буде важко отримати CSS так, як ви його хочете, і, ймовірно, повернетеся до стилізації вашого вмісту за допомогою вбудованого HTML.

Очевидно, ви знаєте краще, ніж це.

Є багато дивних речей, які можна зробити за допомогою CSS. Не вірте мені? Google . Хоча, як тільки ви досягаєте межі бажань зробити дійсно дивовижні дизайни CSS, ви можете попросити підвищити зарплату. Однак, якщо ви хочете йти цим шляхом, є мільярд ресурсів, які ви можете використовувати, щоб відточити свої навички.

У наші дні навчання коду так само просто, як наявність Інтернету та комп'ютера, який має доступ до Інтернету. Серйозно, серед Codecademy , Проект Одін , Удеми , Kahn Academy , і так багато інших ресурсів, у вас є все, що потрібно у вас під рукою. Наступним кроком є ​​час і висунення зусиль, щоб дійсно вивчити і використовувати код.

У вас є які-небудь питання? Коментар нижче і повідомте нам!