Cloxy

CloxySEO блогSVG лого - предимства

SVG лого - предимства

Как да поставим лого в SVG формат на нашия сайт? Какви са предимствата на векторното лого за SEO и ползваемостта? Защо SVG се води семантичен формат, с който търсачките работят по-добре? Отговорите в следващото видео. Продължение на темата HTML5 лого.


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

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

Здравейте! Аз съм Васил Тошков от Cloxy, а темата днес ще е един вид продължение на предното видео, което бяхме направили за HMTL 5 лого. Тогава казах едно нещо, което искам сега да доразвия, а то е, че един layout на един уеб дизайн трябва да съдържа само едно изображение в идеалния случай и това е логото на сайта, но тогава казах, че може и логото да се направи чрез код.

В момента, след като и Google започнаха да го правят това нещо, ми се иска да покажа как става, тоест как да си направим логото на сайта, а може и не само логото, да използваме икони и други в нашия сайт, като SVG. SVG е стандарт за изображения, но всъщност е чист XML код, стандартизиран по W3C XML код, формат за представяне на векторни изображения.

Няма да повтарям целия код, който писахме миналия път. Ще се фокусираме само върху съответното изображение. Ясно е, че когато ще става въпрос за лого, ако ще е лого, но тук е малко по-универсален вариант. Там си има съответната връзка, H1 таг и всички тези неща.

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

Тъй като все още някои браузъри имат проблеми с това, например Interner Explorer 8 и надолу, можете, ако ви пука за старите браузъри, да сложите onerror атрибут, при който при възникване на грешка при зареждане на SVG, да се сменя и да се зарежда PNG изображение, което е най-правилното след SVG, за вашето лого. Какви са предимствата да използвате SVG като лого? Google ги индексира много добре.

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

Но ако е много малко изображение, както вие сте забелязали, понякога просто Google не ги класира, и при видеата, и при изображенията, търсачките се стремят да показват вече добра разделителна способност. При SVG този проблем е решен, тъй като дори изображението ви в логото да е малко, то е векторно и ако някой го търси, чрез търсачка и т.н., не само, че Google го вижда идеално и като първи код, и то в голям размер, но го и класира по този начин.

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

Просто има хора, които са доволни от вашия бизнес и искат да ви сложат връзка, искат да ви сложат в логото до тази връзка, да ви споменат като спонсор на дадено събитие. Логото си трябва, то върви в комплект с брандовите връзки. По този начин вие си споделяте логото в разделителна способност, тъй като е векторно изображение, независимо от големината, всеки може да го използва, а ако иска да го разпечата на плакат.

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

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

Те са семантични. От това, че са стандарт, търсачките могат да анализират и да видят какво има на изображението. Ако на едно стандартно изображение, трябва да гадаят какво има на него, при векторното, то е стандартизиран код, така че търсачката го разбира по-добре, отколкото и хората, разбира и отделните елементи, какво точно има на това изображение.

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

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

Ако използвате векторни изображения, това е пътят към адаптивни дизайни, към по-добро разбиране при търсачките, към по-добро класиране при изображения, тъй като независимо от екрана ви се отваря. Може да го тествате това нещо, как Google добре индексира и рендира векторните изображения. Това е. До следващия път! Чао!

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

5 коментара

Borislav Baychev

Име: Borislav Baychev

Дата: 07.08.2014 09:16:41

Оценка: 5 / 5

Много полезно видео! Харесва ми. Аз обаче имам едно питане, но нека да се вземе предвид, че не разбирам от дизайн, нито от код :) ...да не ми се смеете много.
Така - имаме едно лого, което обаче не включва текст, а само изображение и/или символ. Примерно логото на NIKE, но искаме да не включваме думата "NIKE", а да е само логото. Можем ли да сложим background който да е видим и да е лгоото и отгоре да напишем NIKE трансперантно и реално да не се вижда, но да се чете от ботовете?

Васил Тошков

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

Дата: 07.08.2014 09:32:33

Оценка: 4 / 5

Против правилата е да се крие текст, който се вижда от търсачките.

В случая е достатъчно просто като alt на изображението да се напише бранда.

В предното видео съм го описал подробно как трябва да е кодът:

http://www.cloxy.com/blog/logo/

Васил Тошков

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

Дата: 07.08.2014 13:10:19

Оценка: 4 / 5

Още едно предимство на SVG логото - като споделяш в социалните мрежи и не го разпознава. А логото обикновено е първото изображение в сайта и не е много OK постовете ти да се споделят с него като картинка, вместо с изображението от поста.

Особено валидно за Facebook и противниците на Open Graph като мен :)

Mariela Koleva

Име: Mariela Koleva

Дата: 07.08.2014 19:28:30

Оценка: 5 / 5

Супер, започваме да слагаме логата в .svg! :) И още нещо интересно - когато Васил Тошков говори на тези видея, ръцете му образуват мудрата ХАКИНИ :), която
подобрява и задълбочава дишането, усилва паметта и концентрацията, осигурява "Бърза помощ" за досещане и намиране на загубената дума, образ.. Често (макар и несъзнателно) се използва по време на преговори.
Изпълнява се така: Пръстите на двете ръце са разперени и се докосват с върховете си. :)

Васил Тошков

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

Дата: 15.08.2014 09:23:52

Оценка: 4 / 5

Само за седмица SVG логото ни започна да се класира на първо място в резултатите от изображения при търсене на бранда "Cloxy".

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