Как браузърите парсват HTML (и какво означава това за SEO)

Парсването на HTML от браузърите е процесът, при който браузърът получава чист HTML код от сървъра и го превръща в интерактивна, визуална уеб страница, която виждаш на екрана.

Когато се интересуваш от изобразяването на HTML в браузъра, вероятно си представяш нещо просто: браузърът получава HTML файла, прочита го и показва страницата. Но не, реалността е значително по-интересна – браузърите парсват HTML и сега ще видим как става това.

Браузърите не просто „прочитат“ HTML. Те го парсват1, коригират грешки, вземат решения вместо разработчика и постепенно изграждат DOM дърво, което след това се използва за визуализация.

Разбирането на този процес е важно не само за разработчици, но и за technical SEO, защото начинът, по който браузърите и търсачките обработват HTML, може да повлияе на:

  • интерпретацията на metadata
  • canonical и hreflang сигнали
  • производителността на страницата
  • индексирането

Нека разгледаме как работи това.

Как браузърите парсват HTML (и какво означава това за SEO)
Как браузърите парсват HTML (и какво означава това за SEO)

HTML – идеалната структура срещу реалния уеб

В теорията HTML е добре структурирана система. Всеки елемент има ясно място:

  • <head> – в този елемент се поставя metadata.
  • <body> – в този елемент се поставя съдържание.
  • <meta>, <link> – дават информация за браузъра и търсачките.

На практика обаче уебът е пълен с:

  • липсващи тагове;
  • неправилно вложени елементи;
  • скриптове, които променят структурата;
  • HTML, генериран динамично.

За да може интернет изобщо да работи, браузърите са изключително толерантни към грешки. Те почти винаги се опитват да „поправят“ HTML-а автоматично.

Как браузърите парсват HTML

Как браузърът парсва HTML
Как браузърът парсва HTML

Когато браузърът получи HTML документ, той не чака целия файл да се изтегли. Процесът е постепенен.

Основните стъпки са:

  1. HTML се изтегля от сървъра.
  2. Браузърът започва да го чете отгоре надолу.
  3. Постепенно изгражда DOM дървото.
  4. Започва да показва съдържание още преди страницата да е напълно заредена.

Това означава, че: страницата се визуализира постепенно, докато HTML се парсва.

Затова оптимизации като:

  • preload (предварително качване);
  • prefetch (предварително извличане);
  • DNS prefetch (DNS предварително извличане);

могат да ускорят възприеманата скорост.

Какво става, когато HTML е грешен

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

Например:

ако в <head> се появи елемент, който не е metadata, браузърът приема, че: head е приключил и започва body.

HTML:

<head>
<meta charset="utf-8">
<script>
document.write("<iframe></iframe>")
</script>
<link rel="canonical" href="...">
</head>

Ако JavaScript добави iframe в head, браузърът може да реши, че: <head> е приключил

Това може да доведе до проблеми като:

  • canonical в body;
  • hreflang в body;
  • robots meta извън head.

А някои системи (включително търсачки) игнорират тези елементи извън head.

Защо metadata трябва да е в head

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

Типични примери:

<meta name="robots">
<meta charset="utf-8">
<link rel="canonical">
<link rel="alternate" hreflang="...">

Тези елементи трябва да са в <head>, защото:

  1. стандартът ги дефинира като metadata;
  2. те трябва да бъдат обработени преди съдържанието;
  3. поставянето им в <body> може да създаде конфликтни сигнали.

От гледна точка на SEO това е важно, защото:

  • canonical може да бъде игнориран;
  • hreflang може да не бъде прочетен;
  • robots meta може да се интерпретира неправилно.

Какво се случва със скриптовете

JavaScript може значително да усложни процеса.

По подразбиране, когато браузърът срещне: 

<script>

той:

  1. спира HTML parsing;
  2. изпълнява JavaScript;
  3. продължава parsing.

Това може да промени DOM структурата още по време на зареждането.

Затова съществуват атрибути като:

async
defer

които позволяват по-ефективно зареждане на скриптовете.

Съвети за производителност в HTML

HTML предлага и специални подсказки за браузъра.

Например:

<link rel="preload">
<link rel="prefetch">
<link rel="dns-prefetch">
<link rel="preconnect">

Те казват на браузъра:

  • какви ресурси да зареди предварително;
  • към кои сървъри да се свърже;
  • какво вероятно ще е необходимо скоро.

Тези техники не влияят директно на SEO, но подобряват:

  • скоростта;
  • user experience – UX;
  • конверсиите.

А доброто потребителско преживяване често има косвен ефект върху SEO.

Валиден HTML важен ли е или не?

Много разработчици са обсебени от валидния HTML. Истината е с нюанс.

Съвременните браузъри могат да обработят HTML, който:

  • не е напълно валиден;
  • съдържа грешки;
  • нарушава част от стандарта.

Затова 100% валидност не е фактор за SEO. Но грубите грешки могат да доведат до:

  • счупен DOM;
  • неправилно parsing;
  • загуба на metadata.

Семантичният HTML и SEO

HTML5 въведе нови семантични елементи:

<header>
<nav>
<article>
<section>
<footer>

Те подобряват:

  • достъпността;
  • четимостта на кода;
  • структурната яснота.

Но за търсачките влиянието им е ограничено.

Например:

  • използването на множество <h1> не е проблем;
  • липсата на <section> не вреди на класирането.

Семантичният HTML е полезен главно за:

  • accessibility;
  • поддръжка на кода;
  • инструменти за разработка.

HTML основни познания: Въведение в HTML за блогъри: лесно ръководство за основните тагове (и PDF за изтегляне)

Какво означава това за SEO

Най-важните изводи от начина по който браузърите парсват HTML са няколко.

1. Metadata трябва да бъде в head

Особено:

  • canonical;
  • robots;
  • hreflang.

2. Избягвай JavaScript, който променя metadata

Смесените сигнали създават проблеми за търсачките.

3. Валидният HTML е полезен, но не критичен

По-важно е HTML да е стабилен и предвидим.

4. Performance оптимизациите са важни

Не за crawler-ите, а за потребителите.

Диаграма на процеса HTML parsing → DOM → render tree → layout → paint и SEO рискове
Диаграма на процеса HTML parsing → DOM → render tree → layout → paint и SEO рискове

Как това се свързва с DOM

След като HTML бъде парснат, браузърът създава DOM дървото.

DOM е структурата, която:

  • JavaScript манипулира;
  • CSS стилизира;
  • браузърът рендерира.

Ако искаш да разбереш по-добре този процес, прочети и статията:

👉 Какво е DOM и защо без него уеб не би бил интерактивен

Тя обяснява как HTML се превръща в структура, която браузърът може да използва.

  1. Парсване (от английски: parsing – синтактичен анализ) е процес на анализиране на входни данни (най-често текст или символни низове) и преобразуването им в по-структуриранразбираем за компютъра формат. Това е ключова стъпка в програмирането при която raw (сурови) данни се разбиват на части за да бъдат обработени. ↩︎

Свързани публикации:

  1. Какво представляват breadcrumbs, за какво служат и как се използват за SEO и UX Breadcrumbs - или хлебни трохи - са хипервръзки, които показват местоположението на страницата. Те помагат на потребителя да разбере пътя,...
  2. LTV (Lifetime Value): какво е това и как да го увеличите? Какво е LTV - и защо бизнесът трябва да знае за него? Формули за изчисляване и грешки при използването им....
  3. Какво е DNS и как намира сайтовете в интернет DNS (Domain Name System - Система за имена на домейни) е фундаментална технология в интернет, която действа като телефонен указател...
  4. Как може маркетологът да използва Figma и с какво ще му помогне това в маркетинг стратегията Figma е голям дизайнерски и уеб дизайнерски инструмент. Може би е време да започнеш да го изучаваш?...
Етикети
Ако ви е харесала публикацията, споделете я:

Препоръчвам и тези публикации

Оставете коментар

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.