fbpx

Новини, вдъхновяващи истории, ръководства и какво ли още не

Обичам да изливам мислите си на ред, два или или повече!

Оптимизиране на изображения за уеб сайт

Оптимизация на изображения за уеб сайт [пълно ръководство] – част 1

 

Оптимизация на изображения за уеб сайт

Оптимизация на изображения за уеб сайт – вече не е това, което беше! Google отдавна не се “радва” на уеб сайтове, изпълнени със стотици изображения без описание, по-големи от необходимото и с размер от рода на 6MB.

Точно поради тези причини, в настоящото ръководство ще ти дам насоки как да оптимзираш изображенията в уеб сайта си така, че големия G. да им се радва и да имаш 6+ при тест за оптимизация за търсещи машини.

В предстоящите редове (надявам се да не стане роман), ще ти разкрия не само за до болка познатите ни alt атрибути, но също и как да сервираш изображения, съобразени с мобилната версия на уеб сайта. Ще мина също и през XML картата на сайта, структурираната информация (structured data), и последно, но не и по значение – как да подбираш изображенията така, че да привличаш и задържаш потребители.

Започваме ли?

Като начало – ето пълен списък с всички теми, които ще покрия:

Структура на изображенията

  • Използване на оригинални изображения
  • Премахване на текст от изображения
  • Премахване на излишните изображения

Подготовка на изображенията

  • Използване на съотношение 4:3 или 16:9
  • Оразмеряване на изображенията за размера, за който ще се използват
  • Употреба на изображения с висока резолюция (HD или Retina)
  • Използване на т.нар. next-gen формати за изображения
  • Компресиране на изображения
  • Употреба на описателни заглавия за изображения

Сервиране на изображенията

  • Включване на кеширането
  • Употреба на отдалечена мрежа за доставяне на съдържание (CDN)
  • Употреба на т.нар. lazy loading

Идентифициране на изображенията

  • Попълване на alt атрибуртите
  • Употреба на caption

Та, време е да започна по същество, или да дам старт на първата част от това ръководство!

 

Оптимизация на изображения за уеб сайт

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

За известен период от време, оптимизирането на изображенията за търсене беше считано за недотам важно действие. През 2013 г. от Google са добавили бутон за преглед на изображенията (view image) в резултатите от търсенето. Така, при търсене на изображения в Google, кликвайки на даден резултат, потребителя е бил пренасочван към страница само с изображението, а не към страницата, част от която е изображението (и съответно останалото съдържание). Това е довело до средно 63% загуба на трафик за уеб сайтовете.

През 2016г. от Getty images (уеб сайт – банка за стокови изображения), официално заявяват недоволството си от въпросния бутон пред Европейската комисия. С това си действие от Getty принуждават търсачката гигант да премахне бутона “view image”. Така при търсене в мрежата, кликвайки върху изображение, потребителя бива прехвърлен към страницата (с цялото й съдържание), на която се намира изображението, а от този момент оптимизацията на изображения за уеб сайтове отново влиза в играта като определящ органичния трафик фактор.

 

Алгоритмите за разпознаване на изображения стават все по-добри в идентифицирането на изображения

В тази секция на статията ще подходя с директен пример. Виж изображенията по-долу:

оптимизиране на изображения - Vision AI - faces оптимизиране на изображения - Vision AI - Objects оптимизиране на изображения - Vision AI - web

Тествайки изкуствения интелект на Google за разпознаване на изображения – Vision AI, останах изумена от това колко много знае той за това какво точно се съдържа в картинката. При това без никакви указания от името на изображението. 😉

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

Семантична оптимизация за търсещи машини (Semantic SEO)

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

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

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

 

Скоростта на зареждане на уеб сайта ти наистина е от значение

През юли 2018 г. Google обяви, че скоростта на уеб сайта е фактор за класиране в резултатите при мобилни търсения. По-рано скоростта на страницата беше само фактор за класиране за търсенията, извършени от настолен (desktop) компютър.

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

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

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

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

 

Оптимизация на изображение, което е подходящо за търсене

Използване на оригинални изображения

Спри да използваш т.нар. стокови изображения! Особено тези на усмихнати хора в офис (на които често може да видиш някой китаец, нищо, че таргет групата ти е в България)  Оригиналните изображения се справят много по-добре в търсенето, отколкото стоковите изображения, затова развихри въображението си, извади смартфона си с 24mp камера, или пък DSLR камерата си, и направи няколко авторски изображения. Google ще възнагради оригиналността ти.

Ето какво казват самите Google „Уверете се, че визуалното ви съдържание е подходящо за темата на страницата. Препоръчваме ви да използвате изображения, които добавят оригинална стойност към страницата. Особено обезкуражаваме страниците, на които нито изображенията, нито текстът са оригинално съдържание.“

Премахни излишните изображения

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

Отново според Google, уеб страниците с по-малко, но съответстващи и авторски изображения, конвертират много по-добре, отколкото тези, изпълнени с “тонове” стокови, безсмислени изображения.

Не добавяй текст В изображенията

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

 

Подготовка на перфектно оптимизираното изображение

След като решиш какво точно ще бъде изображението, което ще качиш в уеб сайта си, е важно да изпълниш още няколко стъпки, за да подготвиш напълно. Изображение, което е подходящо оразмерено, компресирано, в следващо поколение формат (JPEG 2000 например), с описателно заглавие, ще се представя много по-добре в търсенето.

Регулиране на размерите

Ако си забелязал, когато използваш Google изображения, изключително големи и изключително широки (като панорамни изображения) обикновено не се показват при търсене. Най-често ще намериш изображения, които се придържат към съотношенията 4: 3 или 16: 9. За всичко останало трябва да зададеш търсенето си с правилните параметри.

Мащабиране на изображенията

Мащабирането на изображенията означава да ги преоразмериш до размерите, които ще използваш на сайта си. Когато изображенията са по-големи или са преоразмерени посредством HTML или CSS (примерно <img src=”sofia_1.jpg” width=”400” height=”500” alt=”София през нощта”/>, това създава допълнителна работа за браузъра и забавя скоростта на страницата, което определено не е добре.

Извод – добавяй изображенията предварително мащабирани за пространството, което ще заемат на уеб страницата. Може да видиш това пространство посредством браузъра и неговите developer tools.

Също, може да тестваш дали имаш по-големи от необходимото изображения посредством инструменти като GTmetrix или PingDom.

Ако имаш твърде много големи изображения, инструмент като Smush Pro CDN може да преоразмери всички тях накуп. Може също да използваш Photoshop за изображения в пакет, въпреки че това работи само за JPEG изображения.

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

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

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

Създаването на изображение за Retina дисплеи е лесно. Всичко, което трябва да направиш, е да замениш текущите изображенията на сайта си с версии, които са два пъти по-широки и два пъти по-високи. Сервиране на правилното изображение за различните устройства е малко по-трудно, но може да използваш плъгин като WP Retina 2x, в случай, че уеб сайта ти използва WordPress.

Използване на формати за изображения от следващо поколение

Ако си използвал Google PageSpeed Insights наскоро, може би си забелязал съобщението за възможността „Да се показват изображения от следващо поколение“.

Оптимизация - Следващо поколение формати на изображения

Намерението на Google с това съобщение е не само да спомогне за създаването на по-бърза мрежа, но и да ни провокира да прехвърлим всичките си изображения към техния формат с WebP отворен код. Форматите на изображения от следващо поколение, като JPEG 2000 и WebP, имат превъзходни възможности за компресиране на изображения. Така че, не само страницата ти ще бъде по-бърза, но и ще се възползваш от добрата страна на Google, като използваш предпочитания от тях формат за изображения.

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

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

А това може да направиш, като използваш инструмент като Adobe Photoshop или други графични редактори, с които да  компресираш изображението преди качване. Друг вариант (който не препоръчвам особено), е да използваш плъгин, в случай, че използваш WordPress платформата.

 

С тази секция завършвам първата част от “Оптимизиране на изображения за уеб сайт [пълно ръководство]”. В следващата част очаквай повече информация за това как правилно да именуваш правилно изображенията си, как да подбираш най-добрите alt атрибути. как да добавяш описание (caption) и още много 🙂

 

WordPress не изпраща имейли

WordPress не изпраща имейли? ЕТО РЕШЕНИЕТО!

 

WordPress не изпраща имейли

Имаш личен блог, фирмен уеб сайт или онлайн магазин и в един прекрасен момент разбираш, че твоят WordPress не изпраща имейли?

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

Това е често срещан проблем – WordPress или не изпраща коректно имейли (влизат в папка Спам), или не изпраща такива изобщо. Повечето от хостинг доставчиците не предлагат имейл хостинг. Но това не означава, че уеб сайта ти не може да получава или изпраща имейли.

Да вземем за пример онлайн магазин, изграден върху WordPress с WooCommerce. Клиентът прави нова поръчка, но нито той получава имейл със статус на поръчката си, нито пък ти като администратор получаваш имейл известие за нова такава. За капак нито магическата сфера, нито боба или лещата не дават каквито и да е известия за получен/изпратен имейл.

Това определено би нанесло щети на бизнеса ти, както и би оставило горчив опит от страна на потребителя/клиента.

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

Първото нещо, което можеш да направиш е да тестваш уеб сайта си с безплатния плъгин Check Email. Лесен за употреба, както и напълно безплатен, плъгина (разширението) ще провери дали WordPress инсталацията или сървъра може да изпраща имейли.

Check Email plugin

 

След като добавиш и активираш плъгина, отиди в таб Инструменти (Tools) и отвори меню Check Email:

cheeck email tool

 

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

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

WordPress не изпраща имейли

От теста разбираме също, че WordPress инсталацията и сървъра нямат проблем с изпращането на имейли и е по-редно да се търси такъв в разширението, което ползваш за контакт – Contact Form 7, Ninja Forms, Gravity Forms и пр.

Дотук добре, но какво правим в случая, в който не получаваме тестовия имейл?

Ето решението!

В случая е необходимо да се възползваш от външен SMTP (Simple Mail Transfer Protocol) доставчик.

Вариантите са няколко, като най-популярните са:

  1. Gmail (изпращане на до 3000 безплатни имейла на месец, повече при абонамент за G Suite)
  2. Mailgun (изпращане на до 10000 безплатни имейла на месец)
  3. SendGrid

В случая ще те запозная с конфигурацията, предназначена за Gmail.

Ето какво е необходимо да направиш:

Стъпка първа

Добави и активирай плъгина WP Mail SMTP

WP Mail SMTP

В лявото меню на административното табло, в таб Настройки (Settings) ще откриеш нов елемент – WP Mail SMTP. В неговите настройки може да зададеш имейл адрес, от който искаш да се изпращат бъдещите съобщения, име, от което да се изпращат съобщенията, както и през кой сървър искаш да се случва това. Тъй като статията е посветена на изпращането на имейли през Gmail SMTP, избери Gmail.

SMTP plugin

След като си задал Gmail като метод за изпращане, то ще се появят две нови полета, изискващи Client ID и Client Secret:

За да получиш информацията, необходима на WP Mail SMTP, то посети този уеб адрес и избери Gmail API:

Ще се отвори нова страница, която изисква от теб активирането (Enable) на съотверното API:

От новата страница, която ще видиш след натискане на бутона ENABLE, избери Create credentials:

Ще се отвори нова страница, от която ще имаш избор на тип API, от който трябва да селектираш Gmail API. След него избери Web browser от менюто за „Which API are you using“, а под него избери User data:

След избиране на правилните параметри по-горе и натискане на бутона What credentials do I need, ще се появят две нови полета, като в първото попълни уеб адреса на сайта, а във второто – Autorized redirect URL (може да вземеш линка от административния панел на WordPress и менюто WP Mail SMTP):

autorization

След изпълнение и на тази стъпка, ще се появи ново поле, в което да въведеш имейл, от който искаш да се изпращат имейлите, както и име. И след финалното натискане на бутона Save, ще имаш достъп до вече създадените credentials – Client ID и Client Secret.

finish

Сега вече може да ги добавиш в административните настройки на плъгиуна WP Mail SMTP и да запазиш настройките!

Може да тестваш отново, изпращайки тест имейл до адрес, който желаеш да получиш заветното електронно писмо 🙂

Happy mailing 🙂

 

 

Хостинг и домейн

Хостинг и домейн… какво представляват?

 

Хостинг и домейн

Хостинг и домейн… доста често ми се е случвало да разговарям с хора, които не са наясно точно какво представляват тези понятия и кое за какво служи. Затова и днес реших да дам своето обяснение по прост, човешки и най-вече – разбираем начин 🙂

Да започваме!

Домейн име. Какво представлява, как да се сдобиеш с такова и важно ли е какво ще бъде то?

Домейнът е името на твоят уеб сайт, например www.yannihristova.com. Може да мислиш за него като за ключът от вратата на твоят дигитален дом.

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

избор на домейн име

Ако планираният уеб сайт ще представлява бизнеса ти, то помисли за ключова дума (името на компанията, дейността, която развиваш…) като част от домейна. Много добър пример е партньор, за който изградих нов уеб сайт, а вече съществуващият му бе с домейн името www.ozvuchavanepodnaem.com.

Какво представляват разширенията на домейните и какво да избереш?

Над 50% от сайтовете в мрежата използват разширението .com. Не е задължително и ти да следваш този пример, но е факт, че това е разширението с най-голям авторитет. Но доставчиците на домейни със сигурност не ограничават избора до тук. Последните години се появиха доста персонализирани разширения, например: .vacations, .university, .tattoo, .party, .bar и още… (ако ти е любопитно, ето списък с всички възможни разширения).

Дали да избереш .com или .bg?

И в двата случая няма да сбъркаш, но ако сайтът ти е насочен само към българска аудитория, може би не е лошо да бъде с разширението за нашата страна, а именно .bg. Специалистите изтъкват своите причини, като сред основните се нарежда оптимизацията за търсещи машини (ако даден потребител търси в Гугъл от български IP адрес, то алгоритъма на машината приоритизира домейни с разширението за съответната страна).

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

 

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

Интересно: Според архивите, един от най-скъпо платените домейни в историята на Интернет е carinsurance.com, е бил продаден за рекордните 49млн. долара през 2010 година.

 

избор на хостинг

Какво е хостинг?

Спомняш си за красивия ключ към вратата на дигиталното ти пространство, нали? Е, хостинга е самото дигитално пространство, или по-скоро – мястото на което се съхраняват всички файлове на уеб сайта ти – изображения, текстове, файлове и пр.

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

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

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

Моят съвет е хостинг доставчика да бъде българска компания, като лично аз използвам услугите на Суперхостинг.бг. Друг съвет, които давам на партньорите си е: хостинг и домейн име да бъдат избрани и закупени от един доставчик с цел уеднаквяване на датите и източника за заплащане.

Е, надявам се тези няколко реда да са ти били от полза и че след тях значението на думите “домейн” и “хостинг” са напълно ясни за теб 🙂