Оптимизация на изображения за Вашия сайт ? – Част 1

Правилното SEO оптимизиране на изображения за уеб сайт е нещо, което много собственици на бизнеси пренебрегват или дори подминават, когато реализират сами своята SEO кампания. Неговото значение всъщност е ключово и спомага както за по-доброто класиране на Вашия сайт в Google Images, Google Search, така и за репутацията на компанията Ви пред Вашите потенциални /реални/ клиенти.

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

Оптимизирайте заглавията на изображенията

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

Използвайте имена на файловете, така че да отговарят на съдържанието им и да бъдат разбрани от търсачките, тъй като търсещите машини обхождат не само текстовете на страниците, но и имената на изображенията. Не забравяйте да включите в заглавието и ключовата дума, по която бихте искали да Ви откриват, по възможност в началото на заглавието. Не включвайте тази дума обаче във всяка снимка на Вашата страница, защото рискувате страницата Ви да бъде понижена в класирането или дори да получите наказание за манипулиране на търсачките, поради претрупване на една и съща ключова дума /Keyword stuffing/!

Ако името на файла включва повече от една дума, то нека думите бъдат разделени със средно тире. Избягавайте прекалено дългите заглавия, максимум до 3-4 думи са напълно достатъчни, в това число и ако снимката е на продукт – просто изпишете марката, серията и модела.

Пример: ime-na-izobrajenie.jpg

Размерът има значение, дори и при оптимизация на изображенията ;)

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

Както вече стана ясно, бързото зареждане на сайта е от съществено значение, както за потребителите, така и за търсачките. Никой не харесва бавно зареждащи сайтове, нали ? Представете си сега как големите и тежки снимки или графични елементи се зареждат на телефон и таблет ? Често се е случвало да се дразните, че даден сайт не Ви се зарежда изцяло, нали ? Доста често, проблемът с бавното зареждане или страница от него идва точно от големия файлов размер на снимките и тоталната липса на оптимизирани изображения.

Основното правило тук е: колкото по-малко толкова по-добре, но не за сметка на качеството. Съществуват редица инструменти за корекция на файловия размер на изображенията, без тяхното качество да бъде засегнато. Разбира се, най-доброто решение е да използвате софтуерният лидер за обработка на снимки – Photoshop и неговата команда “Save for web” от менюто File, но не всеки е запознат технически със спецификата на различните формати изображения, както и с интерфейса и функционалността на Photoshop.

Поради тази причина са създадени и някои софтуерни решения, с изчистени интерфейси, които няма да изискват от Вас да бъдете гуру на фотографията, част от които:

Какъв да е размерът на файла ?

Няма точна рецепта за това. Използвайте Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/, за да следите скоростта си на зареждане. Принципно е добре снимките да бъдат под 100 Kb, но това разбира се не е нито стандарт, нито правило, защото всяка снимка се различава предвид нейната резолюция, размери на изображението /в пиксели/ и тн.

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

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

Бихте могли да използвате и  инструмента YSlow http://yslow.org/ , за да разберете дали оптимизирането на изображенията на Вашия сайт е било успешно. Не забравяйте да направите тест и на мобилен телефон или таблет.

Оптимизирайте alt таговете на снимките интелигентно

Когато погледнем дадена снимка веднага разпознаваме изобразеното на нея, но не по същия начин стоят нещата с търсачките. За да разбере търсещата машина какво съдържа вашата снимка и да я свърже със съдържанието Ви, тя използва именно алт текстът изписан в алт тага, освен заглавието. Как да го добавите?

Просто открийте тага <img> в кода на Вашия сайт и изпишете alt=”Вашият алт таг“.

Пример: <img src=”chocolate-donuts.jpg” alt=”chocolate donuts” />

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

Не забравяйте, обаче, при добавяне на алт текста да включите и желаните от Вас ключови думи. Не прекалявайте с дължината на алт таговете, нека бъдат описателни, но и кратки. Не прекалявайте и с ключовите думи!

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

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

В контекстa е ключа

контекстът и снимката

Поставяйте изображенията близо до релевантния текст, на който те отговарят, за да не обърквате търсачките. Търсещите машини прихващат тематиката на Вашите изображения, като се фокусират върху 2 фактора – на коя страница се намират те и какъв е заобикалящият ги текст. Не допускайте безмисленото поставяне на снимки, които не отговарят на съдържанието, което публикувате.

Използвайте правилните формати в точните ситуации

Доста често съм ставал свидетел на използване на изображения на принципа „Ами това имаше – това сложих“. Подборът на правилния формат е също важен етап в процеса на оптимизация на изображения. Съществуват най-различни инструменти онлайн, с които бихте могли  да конвертирате изображенията си в различни формати. Кои обаче са най-често ползваните формати ?

  • Jpeg – стандартът сред форматите на изображения в интернет. Изображенията в този формат могат да бъдат компресирани без особена загуба на качеството, при което резултатът е качествено изображение с малък файлов размер. Особено подходящи са за продуктови изображения.
  • Gif – това е формат изображения с по-ниско качество от jpeg и макар напоследък да се използва все по-малко, то той намира приложение в изображенията от типа – иконки или елементи от дизайна на сайта. Използвайте gif за малки като размери изображения с проста концепция, която допълва дизайна на сайта или съдържанието на определена страница/пост и тн.
  • Png – това е формат, който добива все по-голяма популярност като алтернатива на гифовете. Предимството мъ е, че поддържа много по-голяма дълбочина на цветността и качеството на изображението не спада след пре-съхраняване /re-saving/, за разлика от jpeg формата. Въпреки всичко обаче файловите размери на тези изображения са все още доста големи в сравнение с Напоследък png форматът се използва изключително засилено за поставяне на лога или map маркери в уебсайтовете, предвид високот му качество.

Защо изображението ми не се появява във Facebook ?

изображения и Facebook

Решението е просто – интегрирайте OpenGraph проткола. В случай, че не можете да се справите с тази стъпка винаги можете да потърсите уеб програмист. Именно в един от мета таговете на OpenGraph се включва и изображението, което ще се показва, когато споделяте публикация в страницата на Вашия бизнес или личния си профил. При интегрирането на графа е важно да бъде поставен следният таг:

<meta property=”og:image” content=”http://example.com/imagetitle.jpg” />

Какво е предимството ? Бихте могли да използвате напълно различно изображение в сравение с това, което сте публикували като основно за Вашия блог пост например, но с единственото условие да бъде релевантно на съдържанието Ви.

Друго предимство на OpenGraph е и това, че се използва и от Pinterest.

Абсолютно аналогичен е и случаят с Twitter, който използва Twitter card.

Както видяхме до този момент процесите на оптимизацията за търсачки на изображения далече не се изчерпват само с правилното заглавие и алт таг. Очаквайте втората част, която ще засегне някои допълнителни фактори, също играещи съществена роля за “приятелското” приемане на изображения от страна на търсачките.

Следва продължение…

Google+ Comments

Powered by Google+ Comments