Cloxy

CloxySEO блогКак да опишем логото си за търсачките?

Как да опишем логото си за търсачките?

Логото е първото нещо, което хората и търсачките виждат в един сайт. То е тръстов сигнал, но само ако е описано правилно в кода на сайта. Как да опишем логото в сайта си така, че да допълва HTML5 outline структурата на документа? Ще разгледаме и някои често срещани грешки в следващото видео.


Налични формати: 720p WebM (VP8) | 360p MP4 (H.264) | 1080p WebM (VP9)

Транскрипция

Здравейте, аз съм Васил Тошков от Cloxy, а темата днес е как да си опишем правилно кода на логото на сайта. Кръстил съм темата HTML5 лого, защото е продължение на предната тема, един вид, за HTML5 семантиката, по-точно как да впишем логото си в целия Outline на документа, но това не означава, че всичко това е приложимо само за HTML5, в смисъл, това е универсален код, който е правилен за абсолютно всички видове сайтове, които имат лого в себе си, нали, а не просто заглавие.

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

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

Примерно, най-честият вариант е да се слага с CSS, тоест, представлява CSS background, при което логото реално не присъства като img tag вътре в самия документ и няма как никоя система да го види. Другият вариант, който по родните ширини е много популярен е логото да се вкарва чрез CSS плюс зад него да се слага скрит текст.

Нали, ясно е, че първото нещо във всеки един сайт трябва да е връзката с текст към началната страница, която връзка доскоро се експлоатираше и се слагаше какъв ли не текст зад нея с идеята да се манипулират търсачките. Текста за тази връзка трябва да е просто бранда на сайта (в момента говорим за някакви фирмени сайтове или организации). Но това, което беше много често срещано е да се слага като скрит текст, най-често с преместен текста 9999 пиксела наляво, с цел да не се вижда.

Самите Гугъл направиха видео, в което казаха, че това не е правилна практика, за съжаление се практикува и до днес много често, в смисъл, това си е скрит текст, което нарушава правилата на търсачките. Така че аз ще се опитам да покажа как да го направим така, че хем да имаме текст, хем да не нарушаваме правилата на търсачките.

Друг проблем, който е свързан с логото, това е ако въобще липсва лого, тоест, когато изобщо нямаме лого на бранда си или логото е част от някакво голямо изображение на целия layout и няма как да се изолира като едно изображение. Нали, има много такива случаи, при които логото, просто няма как търсачките да разберат, че го има. А правилното е да имаме, ако това е нашето лого, нали, просто едно изображение и img таг, който да е видим за всяка една система, нали и това да е първото нещо в кода.

Така, започвам да описвам как според мен е най-добрата практика да се описва едно лого. Първото нещо е H1 таг. Независимо дали нашето заглавие на сайт, така да го нарека, ще е само текст или ще е изображение, на нас ни трябва H1 таг, с който да го заобиколим, нали, това лого или текст. Ако имаме текст там е лесно, в смисъл, просто слагаме текста в H1 и до там или пък след малко ще кажа за връзка.

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

И правят така че, примерно на началната страница заглавието или логото да е в H1, но останалите да не са в някакъв span, примерно и само публикацията да е H1, нали, това е грешно, подчертавам го и винаги е било грешно, не знам защо така се схваща. Особено грешно е в HTML5, където всяка секция започва с H1, мисля, че това вече всеки го разбра, въпреки, че е нещо много отдавна.

Така че когато си описвате логото, то навсякъде трябва да изглежда по този начин, на всяка една страница, а не само на началната. Казах вече за заглавието от първо ниво, вътре, естествено слагаме "a" таг, тоест връзка. Нормално е логото, независимо дали ще е изображение или текст, да се клика на него и да се отива на началната страница.

Сега, тука съм сложил просто slash, но най-добре да се използва абсолютен адрес, тоест целия и трябва да се има в предвид, че началната страница на един сайт не винаги е просто slash, след малко ще кажа защо. И второто нещо е relation home, тоест това нещо много често се забравя. А relation home, като релация на тази връзка казва на търсачките, че това е връзка към началната страница.

И както казах, ще кажа защо, при някои сайтове началната страница не винаги е наклонена черта. При някои сайтове, примерно блогове, инсталирани на наклонена, блог директория и това е началната им страница. Те примерно си нямат начална страница, нищо няма на slash. Така че е важно за търсачките да знаят къде е началната ни страница, обозначавайте я, не е сложно - релация home, вече от няколко години е потвърдена и я има тази релация.

Преди имаше доста спорове, правилно ли е това нещо или не, сега е ясно, че е правилно, и тогава го твърдях и съм бил прав. Така, и вътре слагаме изображението, тоест логото, в момента говорим за логото. Изображението най-добре да е png формат, но това няма някакво кой знае какво значение. Да е кръстено с брандът, макар че и това не е от чак такова значение.

Най-важното в случая е alt атрибутът на изображението, който трябва да е самия бранд, не ключови думи, не някакви други неща, самия бранд или името на организацията. По този начин от цялата тази последователност се получава, че в Outline-а, изобщо в търсачките и цялата структура на документа, ако тествате с някой Outline инструмент за това, за което говорих миналия път, там казах как да си намерите такива инструменти, ще видите, че при тази схема, въпреки, че нямаме никъде реално текст в кода показан, тоест текст извън тагове, а само като атрибути, то ако си тествате Outline-а, че видите, че има заглавие от първо ниво и този alt атрибут става все едно съдържание на H1 тага.

И това е правилния начин да си опишете логото на една страница, нали заглавие от първо ниво, тъй като все пак си имаме, главната секция трябва да получи име и трябва ни H1 таг. Вътре връзка, тъй като трябва да имаме връзка към начална страница oт всяка една страница в сайта си с релация home и след което вътре слагаме изображението, което е самото лого.

При този вариант логото е чисто изображение в кода и всяка една система може да го види. Това, което аз обичам да казвам е, че един добър дизайн трябва да има само едно изображение в себе си и евентуално това е логото на сайта. Нали, всичко останало може да се направи с градиенти, сенки, с CSS, така че това нещо го имайте предвид, когато поръчвате дизайн, казвате: "Искам да има само едно изображение вътре - логото на сайта и нищо друго".

Макар че и то може да се вкара чрез код, но това е друга тема, а и не е добре, хубаво е търсачките да го виждат. Нещо друго, което може да се направи, но е малко по-сложно, не е чак толкова универсален вариант - това е логото да се опише и с microdata, тоест itemprop="logo" да се сложи тука като атрибут.

За целта какво е необходимо - тогава ще ни трябва цялата страница по някакъв начин да описваме като Organization или някакъв друг тип, който поддържа полето лого или някакъв подтип на Organization най-вероятно. И това нещо Гугъл казват, че го поддържат, в смисъл казват, че ако по този начин си го опишете, а сайта ви е авторитетен ще се покаже вместо снимка на авторството отпред, снимка на логото на бранда.

Но това нещо в България не съм го видял, предполагам нямаме толкова авторитетни сайтове, но имайте това нещо в предвид, малко по сложно е за реализация, дори аз не съм успял още да го направя, тъй като при този вариант схемата за Organization ще стане първото нещо, описано на сайта, което рисково, нали.

Аз примерно, ако имам microdata за видео, както е в случая, тя вече няма да е главната microdata, главният описан обект на сайта. Мисля, че това е за сега, надявам се да съм успял да го обясня добре. Описвайте си логото по този начин, всеки останал е грешен и няма да вдъхне необходимото доверие на търсачките. Това е, до следващия път, чао за сега.

бутон за споделяне
Публикувано от на
Средна оценка 4.38 / 5 (8 гласа)

8 коментара

Dimitar Dimitrov

Име: Dimitar Dimitrov

Дата: 01.04.2014 15:04:01

Оценка: 5 / 5

Васко, мисля че е крайно време да си пуснеш брада :)

Petko Nikiforov

Име: Petko Nikiforov

Дата: 05.04.2014 15:08:48

Оценка: 4 / 5

А може ли да добавим към линка title="Brand" ?

Васил Тошков

Име: Васил Тошков

Дата: 05.04.2014 16:40:04

Оценка: 5 / 5

Може, но аз лично бих написал в него "Към началната страница" или нещо подобно. title не го четат търсачките и никога не са го четели, той е за потребителите.

Petko Nikiforov

Име: Petko Nikiforov

Дата: 24.04.2014 11:07:33

Оценка: 4 / 5

Аз пак имам въпрос. В резултат от използването на тази техника за описване на логото на сайта първият елемент от layout-а на всяка страница от сайта ще бъде alt текстът на изображението, който в случая е alt="brand". Но всяка страница от сайта има своя собствена конкретна тематика. Въпросът ми е следният - страница с лого, описано по този начин, ще се класира ли по-зле от аналогична страница, в която съдържанието на първия h1 таг е тясно свързано с тематиката на конкретната страница (и е представено под формата на текст)?

Васил Тошков

Име: Васил Тошков

Дата: 24.04.2014 11:51:18

Оценка: 4 / 5

Няма да се класира по-зле :)

Особено ако и всичко друго ти е описано с HTML5 семантика, търсачките много добре разбират къде е основното съдържание за страницата (article или main таг).

Petko Nikiforov

Име: Petko Nikiforov

Дата: 24.04.2014 14:09:43

Оценка: 4 / 5

Много благодаря за информацията. След няколко дни ще се похваля с резултата :)

Guest

Име: Guest

Дата: 17.08.2014 08:44:08

Оценка: 5 / 5

Поздравления и за двете видеа, Васко, визирам и това за .svg форматите. Освен всичко, което казваш, смятам, че co-occurence практиките също биха могли да извлекат полза от правилно индексиране на логото.

Tihomir Petrov

Име: Tihomir Petrov

Дата: 17.08.2014 08:45:44

Оценка: 4 / 5

Поздравления и за двете видеа, Васко, визирам и това за .svg форматите.
Освен всичко, което казваш, смятам, че co-occurence практиките също биха
могли да извлекат полза от правилно индексиране на логото. Така логото може да се окаже водещо изображение при търсене на определена, асоциираща се с него, ключова дума.

Добавяне на коментар