Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Оптимизация на блог за мобилни устройства

Оптимизация за мобилни устройства
Приветствам гостите, приятелите и читателите на моя блог. Всички или много уебмастъри вече знаят, че от няколко години сайтове и блогове, оптимизирани за мобилни устройства, се класират по-добре от Google. С прости думи, ние трябва да направим нашия блог удобен за четене от потребителите на мобилни устройства, като го оптимизираме.







    За оптимизацията

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

    Първа стъпка

    Влизаме в Search Console ➔ кликаме върху блога си ➔ в лявата страна се отваря прозорец ➔ от който избираме ➔ Трафик на търсене ➔ Използваемост за мобилни устройства.



    Ако след проверката получите резултат "Отлично! Страницата е оптимизирана за мобилни устройства" или нещо подобно, както е на скриншота по-горе, бъдете сигурни, това не дава 100% гаранция, че всички страници в блога са оптимизирани.

    Втора стъпка

    Тогава използваме този Интернет ресурс PageSpeed Insights.
    Проверката чрез тази услуга дава повече гаранции. Не изисква регистрация и е безплатна.




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

    Трета стъпка

    Проверяваме дали в кода на темата ( шаблона ) присъства мета тага viewport . На скриншота е последен, най-долу.




    Той се намира след отварящия маркер <head> и изглежда така:


    <meta name="viewport" content="width=device-width, initial-scale=1">


    Този мета таг се използва за създаване на отзивчив дизайн. Чрез него ще получите автоматично допълнителни правила за областите за гледане на съдържанието на всяко мобилно устройство.
    Ако не го намирате трябва да го впишете. Мета тагът се въвежда в шаблона след отварящия маркер <head>.  Ако при записването на промяната ви се появи съобщение за грешка, то впишете кода в този му вид:


    &lt;meta name=viewport content=&quot;width=device-width, initial-scale=1&quot;&gt;


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


    Последна стъпка

    Проверяваме резултата след направените промени.
    От админ панела на блога ➔ Тема ➔ в дясно от "Активно в блога" е "За мобилни устройства" ➔ кликаме върху зъбното колело ➔ показва се "Избиране на мобилна тема" ➔ слагаме отметка срещу "Да. Показване на мобилната тема на мобилни устройства" ➔ следва избор на мобилен шаблон за вашия блог ➔ Визуализация ➔ Запазване.



    Проверка на направеното

    Ето една полезна връзка към сайт за тест по оптимизиране на блога ви за мобилни устройства.
    Може и да видите такъв резултат:




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

    Здраве за всички вас! Не забравяйте да правите добро на други хора!

    Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

    BGtop

    Успех!

    2 коментара:

    1. Много полезни насоки. Открих, че когато блогът ми е с окончание .com имам следните грешки:

      1. За прозоречния изглед не е зададено „device-width“

      2. Елементите, върху които може да се кликне, са твърде близо един до друг

      3. Размерът на текста е твърде малък за четене

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

      ОтговорИзтриване
      Отговори
      1. Радвам се, че сте мой чест гост! Че съм ви полезна! Заповядайте отново!

        Изтриване