Цей пост є першим у моїй серії про корисні HTML & CSS для блогерів.
Я навчила себе базовому веб-дизайну у віці 11 років . Це призвело до відмінної роботи протягом всього мого коледжу років і багато вільних можливостей з тих пір.
Знання коду, особливо в HTML і CSS, більше не є обов'язковою умовою для блогерів. Прості у використанні теми і плагіни і WordPress заповнили прогалини між тим, що люди хочуть і їх технічний досвід.
Незважаючи на це, корисно мати розуміння того, як працюють речі, особливо якщо потрібно налаштувати різні елементи вашого веб-сайту. Ці поради щодо HTML і CSS для блогерів допоможуть з розумінням SEO.
Перейти вперед до певної секції:
Основні HTML та CSS для блогерів
Тег HTML повідомляє веб-переглядачу, що відображатиметься. З усіх машинних мов HTML є найбільш близьким до людської мови. Загалом, важко зрозуміти основну мету, яка стоїть за тегом HTML.
Загалом тег має дві позиції, а відкриваючий тег виглядає приблизно так:
<tag>
І закінчуючий тег - це те ж саме з зворотним слесом:
</tag>
Загалом, для запуску та закриття команди HTML потрібні як відкриваючий тег, так і закінчуючий тег. Неможливість закрити тег може призвести до дивної сторінки (або гірше).
Заголовки
Однією з перших речей, які приходять на думку в обговоренні HTML і CSS для блогерів стосовно SEO, є заголовки.
<h1> Назва </h1>
Вище наведений фрагмент коду є тегом заголовка. "H" в тезі посилається на заголовок, число - на рівень важливості. Тег h1 має бути назвою вашого блогу.
<h2> Підзаголовки з ключовим словом </h2>
Тег h2 повинен бути підзаголовком, що підтримує назву, що містить ключове слово.
Теги H3-H6 - це додаткові інструменти для підзаголовків, які ви можете або не можете використовувати. Ви можете редагувати розмір, колір, шрифт, позицію та більше заголовків у CSS, але ми збережемо цей урок для іншого часу. Загалом, переконайтеся, що теги заголовків мають сенс для вмісту. Тег h1 повинен бути найбільшим; все інше має зменшуватися.
Заголовки є важливим сигналом для пошукових систем, щоб показати відповідність. Переконайтеся, що ви використовуєте ключове слово принаймні у двох (але бажано більше) заголовках.
Хоча заголовки h2-h6 можна використовувати стільки разів на сторінку, скільки потрібно або необхідно, заголовки h1 слід використовувати лише один раз на сторінці. SEO консультант Алістер Гілл каже, що люди, як правило, зловживають заголовками h1, оскільки вони хочуть зробити текст більшим.
« Проблема з множинними h1s - це те, що вони розмивають актуальність . Пошукові системи використовують їх, щоб вирішити, який вміст, так що якщо ви використовуєте більше, ніж один, вони повинні приймати рішення, яке є більш важливим. - Алістер Гілл
Вміст
Наступні теги HTML і CSS не потрібно запам'ятовувати, але корисно знати.
<strong> Жирний шрифт </strong> <em> Накреслений текст </em> <span style = "text-decoration: underline"> Підкреслює текст </span>
Сильний для жирного шрифту, em (phasize) для курсиву та підкреслення для підкреслення. Досить просто, правда?
В ідеалі, однак, все, що має "style =", буде розміщено на окремому документі CSS - не в коді вашого повідомлення. Те, що відомо як вбудований CSS (стилі CSS на сторінці, а не окремий документ), є поганим для SEO в тому, що він може зменшити швидкість завантаження сторінки. Ми заглибимося в цю тему в наступному уроці. Будьте впевнені, що підпишіться на мою електронну розсилку, яка буде повідомлена, коли вона буде опублікована (форма реєстрації в бічній панелі)!
Додавання текстових прикрас до ключового слова в тексті - це додатковий сигнал пошуковим системам щодо відповідності статті. Якщо можливо, скористайтеся всіма цими трьома способами обробки тексту за ключовими словами у вашій статті. Просто не жертвуйте читабельністю.
Є старі, "застарілі" теги для оформлення тексту, які тепер вважаються застарілими для пошукових систем. До них відносяться:
<b> Текст жирним шрифтом </b> <i> Накреслений текст </i> <u> Підкреслює текст </u>
Хоча вони легше запам'ятовуватись і, схоже, мають більш логічний сенс, пошукові системи інтерпретують їх як знак того, що ви не в курсі нових кращих практик, і це може призвести до того, що ви опустите сторінку результатів пошуку (не добре!). Замість цього виберіть попередній список тегів HTML і CSS.
Зображення
Найбільш основна версія зображення HTML для SEO виглядає так:
<img src = "IMAGE.JPG" alt = "Ключове слово">
Частина тега " img " - це просто вказівка сторінки на виклик зображення. “ Src ” є джерелом файлу - розмістіть URL-адресу зображення тут. URL-адреса повинна містити ваше ключове слово, тому перейменуйте, збережіть та повторно завантажте зображення, якщо це необхідно. Команда " alt " спочатку була створена для читання з екрану, щоб допомогти забезпечити доступність для людей з обмеженими можливостями, використовуючи Інтернет. Хоча ви повинні використовувати його для опису зображення, дуже важливо також включити тут своє ключове слово. Зображення є потужним комунікатором релевантності для пошукової системи - тому переконайтеся, що використовуєте її як таку!
Посилання
Додаткове підвищення SEO може бути досягнуто шляхом додавання внутрішніх посилань на сторінки та повідомлення, які створюють міст до інших частин вашого блогу (або веб-сайту). Це допомагає пошуковим системам підключати точки між вмістом вашого веб-сайту, що допомагає досягти кращої відповідності в результатах пошуку.
Хоча WordPress (та інші системи керування вмістом з редакторами WYSIWYG) зробили надзвичайно простим додавання посилань без розуміння HTML та CSS, ось як виглядає основний код:
<a href="http://www.website.com/page.html"> Текст посилання </a>
Давайте розберемо:
" A " є якорем. Це повідомляє сторінці, що ви викликаєте іншу сторінку. “ Href ” схожий на “ src ” у тезі зображення. Це повідомляє сторінці, що ви викликаєте. Між цитатами є URL сторінки. Між каратами після лапок ви додаєте текст посилання.
Крім зв'язування сторінок у вашому блозі, вихідні події також позитивно впливають на SEO. Прагніть включити двох або більше в кожну посаду, потенційно для лідера думки або ознайомленого бізнесу.
Ці основи дадуть вам достатньо часу, щоб розпочати роботу в пошуках загального HTML & CSS для блогерів. Залиште свої HTML & CSS питання в коментарях, і вони можуть зробити це в іншу тему майбутнього блогу.
Також опубліковано на Середній .
Досить просто, правда?