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 вы можете найти в специальном разделе моего блога, который называется "Продвижение". 

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

Всем удачи!

21 комментарий :

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

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

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

Surya Choudhary комментирует...

thanks for the method using this method now I have ssl :D on my blog https://www.suryatricks.net thanks alot :) sir

Леонид Николаевич комментирует...

На HTTPS переходить всё-равно надо, потому что сама Google заявила, что с выходом версии её браузера Chrome 68, запланированным на июль 2018 года, сайты, не использующие шифрование, будут помечаться как небезопасные для посещения!

Masenka Fortunka комментирует...

Большое спасибо. Единственная статья. Однако хотелось бы узнать, возможно ли убрать небезопасное соединение своего сайта, если он на своем домене?

Masenka Fortunka комментирует...

оказалось все так просто. надо было переключить перенаправление и все)))

Ruslan Ruslanych комментирует...

ОЙ ! СПАСИБО!
все у меня получилось с первого раза в связке с reg.ru
единственное что, не проводить эксперименты с блогом, переставляя его туда сюда с https на http.
в новых блогах https по умолчанию, так вот, его трогать НЕНАДО с самого начала, и будет все пучком. =)

Ruslan Ruslanych комментирует...

Единственный вопрос - сертификат обновляется автоматом?

Ruslan Ruslanych комментирует...

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

Ruslan Ruslanych комментирует...

И еще вот что.
Находим раздел Crypto, а зачем выбираем Flexible (SSL section) как указано на картинке.
надо ставить FULL как минимум, в справке, указывается, что правило флексибл, может вызвать циклические запросы, что, у меня и случилось, ставить надо FULL как минимум

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

Руслан, направила ваш вопрос автору статьи - Евгению (Econ Dude)

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

Привет Руслан. Да, вроде автоматом обновлялся когда у меня стоял. Сейчас всё проще стало в blogger, там добавили достаточно лёгкое подключение https и проблема у меня пропала. Насчёт FULL или флексибл я точно не знаю, я писал по тому как я ставил и как я переводил статью Идуса. Вероятно случая разные для разных сайтов и в вашем именно плный нужен (full). Я честно честно полностью сам не понимаю всех вещей по сертификату. Всё то я в статье описал у меня работало довольно долго и проблем вроде не было.

Ruslan Ruslanych комментирует...

Все верно, FULL просто необходим, иначе, сам гугл ругается на циклические переадресации, только что, зарегистрировал второй домен, на второю учетку в cloudflare.com. Там правило, одна бесплатная учетка, один сайт бесплатно.
Но мне немнго непонятно с шаблоном Блоггера, и тегом HEAD..
Куда вносить тот кусок кода? Между и или просто выше ?
Написано неоднозначно, можно прочесть и так и сяк..
=)

Ruslan Ruslanych комментирует...

И еще вопрос..
Мне хотелось бы обновлять свой сайт, но он основан на Твиттер-Ленте. т.е она встроена на единственную страницу блога. Говорить об обновлении контентента не приходится, так как, индексаторы не лезут во встроенный твиттер-фрейм.
У меня возникла идея, переправлять поток RSS с новостных сайтов, допустим, с какого нибудь немецкого, или французкого (стримить фокс ньюс, мне кажется насмешит гугл-бот) новостного агентства в блог в виде сообщений. Это у меня получилось при помощи триггера IFTTT, но, в том триггере ограничение на 24 срабатывания в сутки.
Засунуть RSS в гаджет "Канал" на блоге, ни как не скажется на внимании индексатора, ведь, по сути, это будет фрейм.
Можно ли сделать так, чтобы поток RSS публиковался текстом на статичную страницу, или, это не привлечет внимание индексатора?

Ruslan Ruslanych комментирует...

https://www.onaliexpress.com/
вот мой сайт на твиттер ленте, идею я откопал случайно, и довольно давно, еще тогда, когда сам твиттер эту возможность не рекламировал.
По поводу автопубликаций новостных агентств, есть у меня лайфхак, и я с удовольствием им поделюсь, после Вашего ответа на вопрос выше.
Спасибо еще раз за эту статью!

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

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