Базова оптимизация на изображения

Потребителите използват Google все повече и повече - това е безспорен факт. Огромна част от търсенията обаче са насочени към секция “Изображения”. Често потребителските намерения зад конкретна заявка биват задоволени чрез откриването на правилното визуално съдържание, което носи достатъчно полезна информация за търсещия. За да достигнат изображенията ни до потребителите обаче, е необходимо да ги оптимизираме правилно, така че шансът Google да ги покаже в топ резултатите да се увеличи. В тази статия ще разгледаме различни техники, чрез които нашето визуално съдържание да се хареса както на Google, така и на нашите потребители.

Защо е необходима оптимизация на изображенията

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

Техники за оптимизация на изображения

Следва да разгледаме някои от начините, чрез които ще помогнем на нашето визуално съдържание да се появи на така желаните челни позиции в Google Изображения, и които ние в SEO отдела на Netpeak използваме. Можете да разгледате и най-добрите практики за оптимизация на изображения от Google тук.

Формат на изображенията

Изборът на правилен формат на изображенията в нашия сайт е от изключително значение. От това зависи качеството на визуализация, размера на файла и съответно бързината, с която ще се зарежда на потребителите, и която е от огромно значение за SEO. Форматите, които се поддържат от Google Изображения са: BMP, GIF, JPEG, PNG, WebP и SVG. Всеки един от тях има своите предимства и недостатъци, затова е необходимо да подберем точно този, който най-добре ще отговаря на нашите нужди. Тук може да се каже, че избора е между “високо качество” или “бързо зареждане”. Ето малко повече информация за всеки един от форматите:

За WebP, JPEG XR и JPEG 2000 - вече имаме чудесна статия в блога за съвременните формати на изображения, в която ще откриете по-детайлна информация за тях.

2. Оразмеряване и компресия на изображенията

След като изберем подходящия формат е необходимо да оразмерим изображенията, така че да “паснат” в пространството, в което е разположено нашето съдържание. Ако например максималната ширина на основния контейнер е 640 пиксела, това значи, че изображенията не бива да надхвърлят тази ширина. В противен случай, това ще доведе до забавяне скоростта на зареждане на сайта, което, както знаем, не е никак добре за SEO. Ето защо е необходимо да пригодим размерите на изображенията за нашия сайт преди да ги качим. Как да го направим? Големите CMS-и имат вътрешни решения за оразмеряване, но тук ще споделим някои външни приложения, които можете да използвате.

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

3. Подбор на ключови думи за изображения

Накъде без ключови думи ? След като сме избрали подходящия за нас формат, размери и сме компресирали изображенията, е време да решим по кои ключови думи искаме да класираме изображенията си. Това би следвало да бъдат заявки, които хората търсят често и то конкретно в "Изображения". Как да ги открием? Много добър вариант е Serpstat. Нека да разгледаме как той би ни бил от полза. Да предположим, че имаме онлайн магазин за цветя, и искаме нашите най-красиви снимки на цветя да се класират на челни позиции в Google Images. Това, което можем да направим, е да проверим кои ключови фрази, свързани с цветя, са най-търсени в Google и в отговор на които търсачката връща резултати с изображения.

Тук е важно да използваме филтъра на Serpstat “Special elements in SERP” -> “Contains all“ -> “Images on request” и “Carousel”, за да отсеем само ключовите думи, които се класират с изображения или карусел в SERP. След кратка справка можем да видим кои ключови фрази свързани с “цветя” са най-търсените и можем да използваме за нашите изображения. Това са фрази, при които търсещите често отиват на “Изображения” след тяхната заявка, което е сигнал за Google, че може би потребителите се нуждаят от визуално съдържание, затова и топ резултатите в SERP са с изображения. 

След като направим своето проучване, следва да съберем списък с всички ключови думи, които сме избрали и по които искаме да се класираме. Разбира се, няма как да класираме абсолютно всички изображения от нашия сайт (в 99% от случаите) на топ позиции, особено ако тяхната бройка е голяма, затова следва да подберем само най-важните и качествени изображения, които искаме да стигнат до потребителите.

4. Наименования, описания, Alt и title атрибути на изображенията

Дойде време да вкараме събраните ключови думи в действие. Следва частта с “добавянето на контекст” към нашето визуално съдържание, чрез който ще помогнем на Google да определи какво точно съдържат нашите изображения и да му “подскажем”, че искаме те да се класират. 

4.1 Наименования на файловете

Често файловете на изображенията са наименовани подобно на: “DSC_123456.jpg” или “IMG_2662.jpeg” и при качване на изображението в CMS платформата, URL адреса на изображението придобива следната структура: site.bg/img/DSC_123456.jpg. Както знаем, Google взима предвид ключовите думи в URL адреса, за да определи съдържанието под този адрес. При изображенията не е по-различно. URL от типа на site.bg/img/proletni-cvetq.jpg, носи много повече информация за това с какво е свързано съдържанието под този адрес. Затова, когато кръщаваме изображенията си, е добре да съобразим следните неща:

4.2 Описания към изображения

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

И все пак трябва да знаем, че описанието към изображението е само част от текста, който Google “чете”. Всъщност, алгоритъмът взема предвид цялото съдържание от страницата, на която се помещава самото изображение, и особено текста около него. Той, както при описанието, трябва да дава още повече контекст чрез тематично свързани думи. Идеи за такива думи можем да почерпим от извора, т.е. Google. Пишем в търсачката например “орхидея” и скролвайки надолу, в секция “Сродни търсения”, можем да видим какво ни предлага Google: 

4.3 Alt и Title атрибути

Когато говорим за оптимизация на изображения, първо се сещаме за Alt и Title атрибутите към тях, нали? Е, дотук видяхме, че не са единствените “герои”, които ще ни помогнат да класираме нашите супер готини картинки в топ резултатите. Но... не можем да не споменем и тях, разбира се. Alt тагът е този текст, който ще се визуализира на потребител, който поради някаква причина не е успял да види изображението на страницата (браузърът не е могъл да го е зареди). Неговото предназначение е да внесе яснота за това, какво има на изображението, както за потребителите, така и за Google. А ако изображението е кликаемо и зад него има линк, alt текста играе ролята на anchor. От друга страна, Title-ът представлява текста, който се визуализира при посочване и задържане върху изображение. Нека да видим как да ги оптимизираме правилно:

Аlt Tag:

Недобре (липсва alt text):

<img src="кученца.jpg"/>

Недобре (преспамване): 

<img src="кученца.jpg" alt="куче кучета кученца малки кученца сладки кученца черни кученца "/>

Добре: 

<img src="кученца.jpg" alt="кученца"/>

Най-добре:

<img src="кученца.jpg" alt="Две черни кученца ротвайлери" />

Title Tag:

• Трябва да бъде текст, различен от Alt тага;
• Кратък, пояснителен текст, допълващ Alt тага и тематичен на изображението;
• Съдържа ключови думи или техни синоними;
• При продуктови изображения в онлайн магазин, може да се формира така: Alt текст + бранда/сайта; 

5. XML sitemap за изображения

XML картата предоставя на Google всички адреси, които бихме желали да присъстват в неговия индекс и, също така, дава възможност съдържанието ни да се индексира по-бързо. Ако нашият сайт разполага с голям брой изображения, които бихме искали да попаднат в индекса на Google, то тогава би било добра идея да ги включим в XML карта. Тук вариантите са два: можем да включим всички адреси на изображения в основната XML карта или да създадем отделна само за изображения. При по-значителен брой изображения втория вариант би бил по-удачен. В картата се използват специални тагове, които предоставят повече информация на Google за самите изображения като: адрес на изображението, описание, заглавие, локация и лиценз: 

javascript:(function()%7bs=document.getElementsByTagName('SCRIPT');
tx='';sr=[];for(i=0;i<s.length;i++)%7bwith(s.item(i))%7bt=text;if(t)
%7btx+=t;%7delse%7bsr.push(src)%7d;%7d%7d;with(window.open())%7bdocument.
write('<textarea id="t"'+(sr.join("\n"))+"\n\n-----\n\n"+tx+'</textarea<script 
src="https://jsbeautifier.org/beautify.js"</script<scriptwith
(document.getElementById("t"))%7bvalue=js_beautify(value);with(style)%7bwidth="99%25";
height="99%25";borderStyle="none";%7d%7d;</script');document.close();%7d%7d)();

<script type="application/ld+json">    {      
"@context": "https://schema.org/",      "@type": "Recipe",      
"name": "Спагети болонезе",      "image": [      
"https://example.com/photos/1x1/примерна-снимка1.jpg",      
"https://example.com/photos/4x3/примерна-снимка2.jpg",      
"https://example.com/photos/16x9/примерна-снимка3.jpg"      
],      "author": {        "@type": "Person",        "name": 
"Митко Димитров"      },      "datePublished": "2020-08-25",      
"description": "Класическа италианска рецепта за спагети Болонезе",      
"recipeCuisine": "Mediterranean",      "prepTime": "PT1M",     
 "cookTime": "PT2M",      "totalTime": "PT3M",      "keywords":
 "класически спагети, болонезе",      "recipeYield": "4",     
 "recipeCategory": "Ястие",      "nutrition": {        
"@type": "NutritionInformation",        "calories": "820 калории"      
},      "aggregateRating": {        "@type": "AggregateRating",        
"ratingValue": "5",        "ratingCount": "18"      },      
"recipeIngredient": [        "1 пакет спагети",        "2 глави лук",        
"500 гр телешка кайма",        "200 гр доматено пюре",        
"босилек"      ]    }    </script>