Наръчник за разработчици: Съществени SEO елементи за един сайт

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

Захванах се със задачата да структурирам най-важните елементи в оптимизацията на един сайт, като ги събера в кратко SEO ръководство за уеб разработчици и дизайнери.
Ето го и резултатът…

SEO оптимизация (или „Оптимизация за търсачки“) е съвкупност от похвати, които подобряват видимостта на сайта в търсачките. On-page (вътрешната) оптимизацията е покриване на изискванията на Google, при създаване на нов сайт, или извършване на малки промени на части от вече завършен сайт, чрез подобряване на HTML кода, структурата и съдържанието на страниците. Колкото по-добре оптимизиран е  един сайта, толкова по-голяма е вероятността, той да попадне из между първите позиции в резултатите при търсене в Google.

Важна роля за SEO оптимизацията играят мета таговете. Те правят описанието на страницата, разбираемо за търсачките. Мета таг раздела може да изглежда по следния начин:

 <head>
 <title>Заглавие на сайта</title> – Заглавие до 60-70 символа
   <meta name=“author“ content=“[email protected]“ /> – авторство на сайта
   <meta name=“owner“ content=“[email protected]“ /> – собственик на сайта
   <meta name=“rating“ content=“General“ /> – за каква публика е подходяща (напр. (+18))
   <meta name=“description“ content=“Описание на страницата“ />
   <meta name=“keywords“ content=“Ключови думи“ />
   <meta name=“copyright“ content=““ />
   <meta http-equiv=“content-type“ content=“text/html;charset=utf-8″ />
   <meta http-equiv=“Content-Language“ content=“bg“ />
   <meta name=“subject“ content=“Тема на сайта“ />
   <meta http-equiv=“cache-control“ content=“no-cache“ />
   <meta name=“revisit-after“ content=“15 days“ /> – указва интервала от време през, който „роботът“ отново да сканира страницата
   <meta name=“robots“ content=“index, follow“ />
 </head>

В последно време се твърди, че единствените мета тагове, които все още оказват някакво влияние са title, description и content-type (заради посочването на charset).

Задължителни HTML Елементи

 

Title таг (Заглавие)
Title tag съобщава, както на потребителите, така и на търсачките, каква е темата на дадена страница. Той трябва да бъде поставен в head частта на html кода.

<head>
   <title>Заглавие на страницата
   </title>

*Между 60 и 80 символа.
*Важните ключови думи да са в началото.
*Всяко заглавие на  страниците да е уникално.

Meta Description таг
Meta description тага предлага на търсачките кратко описание с тематиката на сайта.

<head>
    <meta name=“description“ content=“Примерно описание“>
</head>

*Не по-дълго от 160 символа.
*Всяко описание трябва да е уникално.

Изображение
Ботовете на Google и останалите търсачки са буквално „слепи“ за снимковото съдържание на сайта. С цел снимките да бъдат оптимизирани и да се каже на ботовете какво има на тях, се използват описателни заглавия и „alt“ атрибут.

<img scr=“image.jpg“ alt=“описание с ключова дума“ width=“100″ height=“100″/>

Heading таг – <h1>, <h2>, <h3>…
Съдържанието на страницата има най-голямо значение при позиционирането на сайта. Заглавните тагове структурират това съдържание, като показват на търсачките най-важните части от текста. 

Пример: На страница, която съдържа новина, може да се сложи името на сайта в <h1>  таг, а заглавието на новината в <h2> таг и т.н.

За по-ефективно SEO се използва само по един <h1> таг на страница.

Хиперлинкове
Хиперлинковете са URL връзки в съдържанието, които сочат към друга вътрешна страница на нашия сайт или към страница на друг сайт. С помощта на анкор текст, хиперлинковете указват на търсещите машини какво се крие зад посочения линк.

* Линковете в страницата трябва да са максимум 150.
* Когато връзката сочи към нискокачествен сайт, използвайте „nofollow“ атрибут.
* При връзките от изображения, alt тага служи за анкор текст.

Текстов линк:
<a href=“http://www.website.com/page.html“>Описание с ключова дума/фраза</a>

NoFollow линк:
<a href=“http://www.website.com/page.html“ rel=“nofollow“>Описание с ключова дума/фраза</a>

Линк от изображение:
<a href=“http://www.website.com/webpage.html“><img src=“keyword.jpg“ alt=“описание с ключова дума/фраза“ width=“100″ height=“100″></a>

URL адреси
Правилната структуриране на URL адресите, може да улесни обхождането на сайта от ботовете на Google, и съответно да спомогне за оптимизацията.

Пример за грешен URL адрес:
„http://www.website.com/#psj=1&q=page2“

Пример за оптимизиран URL адрес
„http://www.website.com/категория/име-на-продукт“

* Използвайте субдомейните внимателно, защото могат да бъдат разглеждани като отделни единици, разделящи авторитета на домейна.
* Отделяйте думите в url адреса с тире („-„)
* Колкото по-дълъг и натъпкан с ключови думи е url адреса, толкова по-неефективна е оптимизацията му.
Каноникализация
Задължително е да бъде направена каноникализация на домейна. Това означава домейна с и без „www“ да води до едно и също място. В противен случай, Google отчита съдържанието, като дублирано.

Често срещани дублирания на началната страница са:

– http://www.example.com
– http://example.com
– http://www.example.com/index.html
– http://example.com/index.html
За целта трябва да се добави rel=“canonical“ линк към заглавната <head> част на неканоничата версия на всяка html страница.

Това става по следния начин: Избирате предпочитана (канонична) страница (като например http://website.com/product.php?item=laptopi) и създавате <link> елемент с rel=“canonical“ таг:

<link rel=“canonical“ href=“http://website.com/product.php?item=laptopi“/>

След което копирате текста и го поставяте в <head> частта на всяка неканонична версия на тази страница (например: http://website.com/product.php?item=laptopi&sort=price).

Robot.txt
Robot.txt е файл, чрез който можем да ограничаваме или забраняваме достъпа на обхождащите ботове на Google до части от сайта. Той указва на роботите кои файлове и папки могат да бъдат индексирани, и кои не.

robot.txt задължително се поставя в основната директория: http://website.com/robot.txt

Създаването на robot.txt става с обикновен текстов редактор, например Notepad и следните команди:

User-Agent: име на робота
Disallow: забранява на определени папки, файлове и съдържание да бъдат индексирани

Примери:
User-Agent: Googlebot
Disallow: *.php

Забраняване на Google да индексира всички файлове с разширение .php

User-Agent: *
Disallow:

Разрешава на всички търсещи машини да индексират цялото съдържание на сайта.

User-Agent: *
Disallow: /

Забранява на всички ботове на търсачки да индексират цялото съдържанието на сайта.

Рестрикции към търсачките могат да бъдат указани и чрез мета таг:

<html>
<head>
<title>…</title>
<META NAME=“ROBOTS“ CONTENT=“NOINDEX, NOFOLLOW“>
</head>

XML Sitemap
Противно на robot.txt,  който посочва на търсачките кои страници са забранени за индексация, XML Sitemap (картата на сайта) указва всички достъпни за индексация страници. Това е XML документ, който обединява всички URL адреси на сайта.

XML Sitemap също е добре да се постави в основната директория: http://website.com/sitemap.xml

Синтаксисът на XML Sitemap изглежда по следния начин:

<?xml version=“1.0″ encoding=“UTF-8″?>
<urlset xmlns=“http://www.sitemaps.org/schemas/sitemap/0.9″>
    <url>
        <loc>http://www.website.com/</loc>
        <lastmod>1970-01-01</lastmod>
        <changefreq>monthly</changefreq>
        <priority>0.8</priority>
    </url>
</urlset>

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

<?xml version=“1.0″ encoding=“UTF-8″?>
<sitemapindex xmlns=“http://www.sitemaps.org/schemas/sitemap/0.9″>
    <sitemap>
        <loc>http://www.website.com/sitemap1.xml.gz</loc>
        <lastmod>2004-10-01T18:23:17+00:00</lastmod>
    </sitemap>
    <sitemap>
        <loc>http://www.website.com/sitemap2.xml.gz</loc>
        <lastmod>2005-01-01</lastmod>
    </sitemap>
</sitemapindex>

Деклариране на езика/езиците в HTML елемент
Ако сайтът е мултиезичен, е добре всеки език да бъде указан с помощта на hreflang релация.

Когато сайта е на български, но има английска версия: В <head> частта се добавя <link> елемент сочещ към английската версия (http://website.com/en/) за всяка от страниците, по следния начин:

<link rel=“alternate“ hrefland=“x-default“ href=“http://website.com/“ />
<link rel=“alternate“ hreflang=“en“ href=“http://website.com/en/“ />

Могат да бъдат отбелязани и алтернативни версии на съдържанието за таргетиране на различни държави, например за САЩ и Беликобритания:

<link rel=“alternate“ hreflang=“en-US“ href=“http://website.com/en-us/“ />
<link rel=“alternate“ hreflang=“en-GB“ href=“http://website.com/en-gb/“ />

Sitemap версия на двуезичен сайт

<?xml version=“1.0″ encoding=“UTF-8″?>
<urlset xmlns=“http://www.sitemaps.org/schemas/sitemap/0.9″
     xmlns:xhtml=“http://www.w3.org/1999/xhtml“>
     <url>
      <loc>http://website.com/bulgarian</loc>
       <xhtml:link rel=“alternate“ hreflang=“de“ href=“http://website.com/english/“ />
       <xhtml:link rel=“alternate“ hreflang=“en“ href=“http://website.com/bulgarian/“ />
     </url>
     <url>
        <loc>http://website.com/english/</loc>
        <xhtml:link rel=“alternate“ hreflang=“en“ href=“http://website.com/bulgarian/“ />
        <xhtml:link rel=“alternate“ hreflang=“de“ href=“http://www.website.com/english/“ />
     </url>
</urlset>

Микроформати
Микроформатите са критерии, по които могат да бъдат структурирани определени данни на дадена уеб страница, така че търсещите машини да разберете по-добре съдържанието. С тяхна помощ можем да акцентираме върху характерна информация на сайта си, като повишим репутацията ѝ, не само пред потребителите, но и пред търсачките. Такава информация може да бъде ревюта, продукти, организации, събития, личности, дестинации, блог публикации, фирми, рецепти и др. 

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

Schema.org обединява основните правила, свързани с микроформатите, като се е превърнала в стандарт за водещите търсачки Google, Yahoo, Яндекс и Bing.

Прилагане на микроформати в пример:

Оригинален код:

<h1>Лаптоп HP</h1>

<img src=“laptop-hp.jpg“ alt=“Лаптоп HP“ />
Оценка 4/5 от общо 10 отзива

625.00 лв
в наличност

Описание на продукта:
Лаптоп HP 255 F1A01EA с 15-инчов LED дисплей, процесор AMD Dual-Core E1-1200 APU 1.40 GHz и видеокарта AMD Radeon HD 8210.

Код след въвеждане на микроформатите:

<div itemscope itemtype=“http://schema.org/Product“>
  <span itemprop=“name“<h1>Лаптоп HP</h1></span>
  <img src=“laptop-hp.jpg“ alt=’Лаптоп HP’ />
  <div itemprop=“aggregateRating“
    itemscope itemtype=“http://schema.org/AggregateRating“>
   Оценка <span itemprop=“ratingValue“>4</span>/5
   от общо <span itemprop=“reviewCount“>10</span> потребители
  </div>

  <div itemprop=“offers“ itemscope itemtype=“http://schema.org/Offer“>
    <span itemprop=“price“>625.00 лв</span>
    <link itemprop=“availability“ href=“http://schema.org/InStock“ />В наличност
  </div>

  Описание на продукта:
  <span itemprop=“description“>Лаптоп HP 255 F1A01EA с 15-инчов LED дисплей, процесор AMD Dual-Core E1-1200 APU 1.40 GHz и видеокарта AMD Radeon HD 8210.</span>
</div>

Навигация
Огромна част от оптимизирането на един сайт е свързана с неговата архитектура. Добре структурираните навигационни схеми правят добро впечатление, както на търсачките, така и на потребителите.

Breadcrumb навигация – Една от най-използваните структури е т.нар. „breadcrumbs“ – вътрешни връзки, разположени отгоре или отдолу на страницата, показващи пътя до страницата, в която се намираме в момента. Тя позволява на посетителите да се върнат на предишната секция или направо на главната страница, с един клик. Най-често breadcrumbs започва с Началната страница, а след нея надясно се подреждат останалите секции.

Авторство
Google придава голямо значение на авторството. Съдържанието в страниците може да бъде синхронизирано със съответния Google+ профила така, че резултатите от търсенето да изкарват информация за автора или бранда:

Google+ Authorship
*За автори, които искат да излизат при търсения в Google.

1. Свързване на съдържанието на сайта към Google+ профил с

<a href=“[profile_url]?rel=author“>Google</a>

2. Обратна връзка към сайта от секция „Contribution“ в Google+ профила .

Google+ Publisher
*За бизнеси, марки, продукти и организации.

1.Връзка към Google+ профила/страницата от началната страница на сайта.

<a href=“[profile_url]?rel=publisher“>Google</a>

2. Връзка към сайта през Google+ страницата.

Мобилност
След като все повече хора започват да използват смартфона и таблета си, като основен източник на информация от Интернет, Google (и останалите търсачки) сезахвана със стандарт за мобилност на сайтовете. Така включването на адаптивен (Responsive) дизайн и/или мобилна версия на сайта е необходимост.

За адаптивен дизайн се използва CSS код, който променя визуализацията на уеб страниците, в зависимост от екрана на устройството.

Responsive дизайн може да бъде приложен по следния начин:

    /* Phones*/
    @media (max-width: 767px) {…}

    /* Tablets to Desktop */
    @media (min-width: 786px) and (max-width: 992px) {…}

    /* Large devices */
    @media (min-width: 1200px) {…}

Когато задаваме отделна десктопна и мобилна версия на сайт, е наложително двете версии да се идентифицират с тагове rel=“alternate“ и rel=“canonical“, за да се избегне дублиране на съдържание.

Десктопна страница: http://website.com/
    <link rel=“alternate“ media=“only screen and (max-width: 640px)“      
    href=“http://m.website.com/“/>

Мобилна страница: http://m.website.com/
    <link rel=“canonical“ href=“http://website.com/“/>

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

За да подобрим скоростта на сайта, той е добре да използваме:

– метод за кеширане;
– по- малко CSS файлове (под 4);
– по-малко JavaScript файлове;
– gzip компресия.
Google Webmaster Tool
Google Webmaster Tool е безплатен инструмент за уебмастъри, чиято функционалност помага на собствениците на уеб сайт да идентифицират грешки в синтаксиса, който пречат на сайта да се класира по-добре в Google, като освен това дава информация за индексираното от търсачката съдържание.
Функции на Google Webmaster Tools:
– Установява в кои части от сайта ботовете на Google срещат трудност при обхождането му.
– Тестване и добавяне на XML Sitemap.
– Генериране и анализ на Robot.txt файл.
– Премахване на URL адреси, които вече са обходени от Googlebot.
– Установяване на основния домейн.
– Идентифициране на грешки при заглавни и описателни мета тагове.
– Управление и следене на блокирани URL адреси.
– Получаване на известия при нарушения в стандартите на Google.

С Webmaster Tools можем да тестваме XML Sitemap и да я добавим за индексиране в Google. Това става в Обхождане>Sitemap>Добавяне/тестване на Sitema.

Заключение
Оптимизирането на един сайт с цел по-лесна индексация от търсещите машини и  по-лесна интеракция  за потребителите, дава отлични предпоставки, той да бъде класиран по-напред в Google. Всяка една от горните практики оказва влияние за позициите на сайта.

Източници:
MOZ SEO Cheat Sheet
Google SEO Starter Guide
host.bg
optimization.bg
Gloxy
Wikipedia
 

Иван Цъклев

Иван Цъклев е експерт по SEO оптимизация и дигитален маркетинг. Автор на многобройни материали. Интересува се от мобилни технологии, стартъп проекти, туризъм и литература.