2017-06-21

Textual description of firstImageUrl

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger
Протокол передачи данных с шифрованием HTTPS набирает всю большую популярность. Google несколько раз рекомендовали получить SSL сертификат (Secure Sockets Layer) для своего сайта вебмастерам, и особенно если на сайте хранятся какие-то пароли или проводятся финансовые операции.

В этой статье я расскажу как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger, в случае если у вас свой домен.

Случай довольно редкий, однако он встречается, а переезд не такой-уж и простой.


Зачем переходить с HTTP на HTTPS?


Переход на HTTPS может быть полезен и для информационных сайтов или блогов. Chrome браузер (которым владеют Google) уже давно показывает сайты разным цветом, например для сайтов вида https:// цвет адреса будет зелёным, а так-же вы увидите надпись "secured", что говорит о том, что соединение защищённое.

Пользователи тоже постепенно проникаются большим доверием к HTTPS, ну а последний фактор в пользу перехода в том, что Google может начать использовать (или уже использует) факт наличия https для ранжирования, следовательно переход на более защищённый протокол может повысить общий трафик.

После перехода у сайта может быть временное падение трафика, однако обычно показатели посещаемости восстанавливаются довольно быстро.

Разница между платным и бесплатным SSL сертификатом


Переход на HTTPS предполагает получение SSL сертификата. Сертификаты бывают платные и бесплатные. От их стоимости зависит уровень защиты данных и сложность шифрования (что нужно далеко не всем сайтам), а так-же в дорогих сертификатах можно указать свой бренд и он будет показывается прямо в браузере.

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Пример платного сертификата - twitter

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Пример бесплатного сертификата без бренда для blogger блога (econdude.pw)

В принципе покупать дорогой платный сертификат не имеет большого смысла для большинства сайтов, можно обойтись дешёвым, либо вообще бесплатным.

Бесплатные хорошо подойдут для блогов малого или среднего размера.

Трудности переезда на HTTPS для Blogger


В данной статье я рассматриваю процесс получения сертификата и переход на https только для платформы blogger (blogspot), хотя процесс и принципы например для WordPress будут очень близкими. 

Дело в том, что blogger хоть и обладает некоторыми преимуществами (бесплатность, хорошая интеграция с google, возможность кастомизации и многое другое), обладает и минусами. 

Одним из таких минусов является то, что про блоггер бывает очень сложно найти современную актуальную информацию, а так-же отсутствие множества хороших плагинов, которых полно для WP. Как следствие, такие процессы как подключение своего домена, а уж тем более переход с http на https могут вызывать сложности.


Стандартные бесплатные Blogger домены 3-го уровня (.blogspot) к счастью уже обладают встроенным https, однако при покупке своего домена https пропадает и разобраться как его получить не так уж и просто.

На Русском информацию найти тяжело, поэтому когда я переходил на https (блог econdude.pw), я переводил Английские гайды 2016-го года, довольно современные. 

Лично я получал бесплатный сертификат через cloudflare.com

Про эту компанию есть разные отзывы и у меня были сомнения, что бесплатные сертификаты там будут вечными. Однако один из директоров компании говорил, что их компания будет всегда иметь этот сервис и он всегда будет бесплатным.

Это позволяет им получать бесплатные данные для анализа, а так-же позволяет привлечь множество новых клиентов, которые могут потом привести уже тех, кто заплатит за улучшенный сертификат где чуть больше возможностей.

Прежде чем переводить свой сайт на blogger на https я хочу вас предупредить что на данный момент blogger довольно плохо поддерживает https для своих доменов.

У вас могут возникнуть проблемы с дублями страниц, а некоторые элементы и виджеты (например популярные статьи) могут отображать http.

Некоторые из этих проблем решаемые, например можно насильно заставить blogger использовать https, просто в поиске шаблона замените все ссылки (href) с "https" на "http", но это решит не все проблемы.

Канонические адреса в мобильной версии вы заменить так уже не сможете.

Одним словом переехать на https на blogger возможно, но у вас могут возникнуть проблемы, поэтому подумайте надо вам это вообще или нет.

Как получить бесплатный SSL сертификат для Blogger


Идём на сайт cloudflare.com и создаём там новый аккаунт. С этим проблем быть не должно.

Для написание этой статьи я переводил материалы howtoshout.com и конкретно вот эту статью, автора оригинала стоит упомянуть (Prajjwal Rajput) и сказать спасибо.

Сайт на Английском и это американская компания, но там не трудно разобраться. 

Далее нам нужно добавить наш домен Cloudflare CDN на наш блог

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Добавьте ваш домен и просканируйте DNS записи

После сканирования Cloudflare выдаст вам два новых имени сервера (name server) и вам нужно будет ими заменить ваши старые имена сервера для вашего домена. 

В зависимости от того, через какую компанию вы покупали свой домен, процедура может отличаться, но примерно она будет такая:

  • Открываете dashboard (панель), а потом идёте в настройки домена (Domain’s Setting). Всё это делается на сайте где вы покупали домен для blogger, а не в интерфейсе самого blogger;
  • Там вы увидите "nameservers" - имена серверов;
  • Выберите "Custom Nameservers" - свои имена серверов, и введите те, которые вам выдал Cloudflare;

Когда вы это сделали, это означает что ваш домен теперь будет использовать Content Delivery Network (систему доставки контента - CDN) от Cloudflare.

Справились? Идём дальше.

Подключение SSL Certificate (HTTPS)


Открываем сайт Cloudflare.

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Находим раздел Crypto, а зачем выбираем Flexible (SSL section) как указано на картинке.

Вот и всё, вы подключили SSL (HTTPS) для вашего кастомного blogger домена.

Однако всё с этим пунктом, но мы пока еще не закончили.


Настройка редиректа для всех ссылок с HTTP на HTTPS


Найдите страницу Page Rules (правила страницы) и добавьте 3 новые правила.

Вот тут внимательно.

Просто замените "bloggerguider.com" на ваш домен как это показано на скриншотах ниже.

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Правило 1. Always Use HTTPS

Сделайте всё как указанно вот тут, и, важно, адрес пишите с такими-же звёздочками (*) как на скриншоте. 

Обратите внимание что вот тут адрес вашего сайта указывается HTTP и без WWW

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Правило 2. Forwarding URL, 301 - permanent redirect

Сделайте всё как указано. Так-же смотрите за звёздочками и http (сверху), https (снизу).

Тут мы ставим редирект (перенаправление) с HTTP => HTTPS + WWW

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Правило 3. Forwarding URL, 301 - permanent redirect

Тут практически тоже самое, только сверху начинается с HTTPS

В данном случае мы ставим редирект (перенаправление) с HTTPS => HTTPS + WWW

Вот тут легко можно что-то напутать, так-что если у вас не сработает, еще раз проверьте эти скриншоты и сделайте всё как указанно на них.
  • После настройки трех правил, проследуйте в раздел "firewall"
  • Security Level (Уровень защиты) - выбирайте low (низкий)
  • На этом всё с Cloudflare, можем закрывать и идём в наш блог.

Настройка блога


Откройте ваш блог и вы увидите, что главная страница теперь перенаправляет на HTTPS, однако все наши ссылки остались в виде HTTP, нам нужно их тоже переделать под HTTPS.

  • Откройте редактор HTML
  • Найдите "</head>" и вставьте код, который я указал ниже, перед (выше) head.

Не забудьте сделать резервную копию шаблона перед этим!

<script>
$(document).ready(function() 
{           $("a").each(function() 
{             var i = $(this).attr("href");            
 var n = i.replace(http://www.yourdomain.com, "https://www.yourdomain.com");                               $(this).attr("href", function() {               return n             })           })         });       </script>
Жирным выделил название домена, его вам нужно заменить на своё.

Далее, найдите следующий html код:
<b:include data='blog' name='all-head-content'/>

Удалите этот код и добавьте следующий после (ниже) "</head>"

<link href='https://www.yourdomain.com/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='blogger' name='generator'/>
<link href='https://www.yourdomain.com/feeds/posts/default' rel='alternate' title='BLOGTITLE - Atom' type='application/atom+xml'/>
<link href='https://www.yourdomain.com/feeds/posts/default?alt=rss' rel='alternate' title='BLOGTITLE - RSS' type='application/rss+xml'/>
<link href='https://www.blogger.com/feeds/BLOGID/posts/default' rel='service.post' title='BLOGTITLE - Atom' type='application/atom+xml'/>
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/2591933621-ieretrofit.js"></script>
<![endif]-->
<meta expr:content='data:blog.url' name='og:url:domain'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
Замените название домена и ID блога. 

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Вот так можно узнать ID blogger блога, оно в адресе


Почему HTTPS показывается оранжевым?


Оранжевым адрес в Chrome показывается если какие-то элементы на сайте загружаются с сайтов, на которых нет HTTPS (незащищённые источники). 

Чаще всего это какие-то картинки, логотипы и счётчики. Нужно это устранить и перезалить картинки на сайты, где уже есть HTTPS. На большинстве хостингов HTTPS есть уже очень давно, в том числе и blogger хранит картинки на HTTPS.

Посмотрите код страницы (правая кнопка мышки => inspect / view page source) и там вам покажет какие элементы загружаются с HTTP.

  • Часто вам нужно будет перезалить логотип и favicon блога еще раз.
  • Часто виджет поиска (стандартный от blogger) будет мешать HTTPS, поэтому лучше поставить пользовательский поиск от Яндекса или Google.

Если вам нужен стандартный виджет поиска, идите в код HTML, найдите вот это:
<form expr:action='data:blog.searchUrl'>

И замените это на:
<form expr:action='data:blog.searchUrl.https'>

Если ошибка не пропадает, идём в код html и ищем через поиск (ctrl + f) все старые адреса "http" и смотрим откуда грузиться незащищённый контент и пытаемся исправить.

Наша задача в html коде найти все "http" и постараться их заменить на "https".

Дополнительная информация: Как настроить смешанный контент


Последнее...


Я знаю что вы уже чуть не умерли всё это настраивать, но мы почти закончили!

Сейчас нам нужно дать Google понять, что мы переехали на HTTPS. Поэтому идём в Google Search Console и там добавляем два новых адреса:

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Всего будет 4, с www и без него

Так-же откройте файл robots.txt (Настройки поиска => Сканеры и индексирование):

И замените старый файл вот таким. Просто добавьте туда https.

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.yourdomain.com/sitemap.xml
Так-же в Вебмастере Яндекса можно и нужно добавить что вы переехали на HTTPS

Как получить бесплатный SSL сертификат и перейти на HTTPS для Blogger

Вам нужно "склеить зеркала", сказать Яндексу, что теперь сайт находится на HTTPS, там должна быть у вас такая опция - переехать на HTTPS, или как-то так. Сделать это не трудно.

После этого Яндекс уберёт индексацию HTTP и добавит новый сайт отдельно на HTTPS. Старый убирать не нужно, иногда будут давать ссылки именно на HTTP и можно будет их посмотреть.

Так-же можете отправить новую версию sitemap.xml уже с HTTPS. 

Заключение


На этом всё. Гайд по переезду на HTTPS и получению бесплатного сертификата SSL для Blogger получился довольно большим и сложным, но надеюсь что он вам помог удачно переехать. 

Автор статьи и перевода: Евгений (Econ Dude - econdude.pw). Другие мои материалы про раскрутку, продвижение и про платформу blogger вы можете найти в специальном разделе моего блога, который называется "Продвижение". 

Так-же я буду периодически заглядывать сюда и постараюсь ответить на ваши комментарии. 

Всем удачи!

8 комментариев :

Econ Dude комментирует...

Одна из моих первых гостевых статей :)
Буду иногда заглядывать сюда и проверять комментарии. Постараюсь ответить на ваши вопросы.

Александр Минин комментирует...

Спасибо большое! Крайне полезная статья.

Блин, уже который раз на твоём блоге, ты явно умеешь писать полезные вещи (:

Иванова Наталья комментирует...

Александр, на этот раз статья не моя, а гостевой пост Econ Dude - его блог

жумабай тулебаев комментирует...

Очень полезная статья. Спасибо.

Econ Dude комментирует...

Добавлю кое что к статье. Если вы всё-таки решили переезжать на HTTPS таким образом как я написал в статье, предлагаю вам еще раз взвесить все за и против.

После переезда я не заметил уж очень сильного роста трафика и я вижу многие сайты в топе кто имеет http. Для информационных сайтов, где нет выплат, регистраций и паролей, переезжать сейчас вот этим образом может быть рано.

Дело в том, что blogger До сих пор плохо поддерживает https на своих доменах, и у вас могут возникнуть проблемы с дублями страниц и каноническими адресами / ссылками. Например при добавлении виджета "популярные статьи" все ссылки там будут на http. Что-то из этого можно починить с помощью других манипуляций, но всё это вы делайте на свой страх и риск!

Мой блог работает на https уже 6+ месяцев и вроде как всё нормально, однако приходится очень много править всяких мелочей и много читать, ковыряя свой шаблон. А гайдов нормальных на Русском вы не найдёт, кроме может быть Азбуки Блогера или Шпаргалки Блогера. Я читаю про блоггер на 90% на Английском, но даже там мало гайдов.

Короче если вы сделайте как в статье и переедите, а потом у вас будут какие-то мелкие технические глюки - не вините меня :) Гайд поможет переехать бесплатно и получить сертификат, и https у вас будет, но глубже копать - это уже на вас.

Анонимный комментирует...

Мда какой то не доделанный ssl получается, у блогера полно своих внутренних элементов которые по http грузятся из за этого браузеры пишут мол не безопасное соединение, в общем не смог побороть пришлось обратно откатиться на http.

Econ Dude комментирует...

Анонимный комментирует... - там можно насильно потом менять все элементы на https в шаблоне, я так делал и почти все руками поборол, но оказалось что мобильная версия такая, что вот её вообще нереально переделать потом, она так и будет с http, и я тоже в итоге откатил на http.

Тем не менее от статьи не оказываюсь, это не проблема статьи, а проблема blogger. Надеюсь они сделают когда нибудь нормальную интеграцию кастомных доменов и https

Анонимный комментирует...

Интересно почитать, как этот сертификат к сайтам на Вордпресс подключить.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности