Как на фотографии поставить свой логотип. Как установить кликабельный логотип в шапку

Компания «Окна Рехау» специализируется на производстве и установке пластиковых окон и дверей в Москве. С момента разработки сайта компания заказывает услуги SEO и интернет-рекламы в WebCanape, поэтому специалисты по продвижению тщательно следят за позициями сайта в поиске и планируют долгосрочное развитие ресурса.

После появления новости, что с 1.01.2017 сайты, на которых собираются данные кредитных карт или пароли, будут отмечаться в браузере Google Chrome как потенциально опасные для пользователей, принято решение об установке SSL-сертификата и переводе сайта на защищенный протокол.

HTTPS (от англ. HyperText Transfer Protocol Secure) — расширение http-протокола, которое поддерживает шифрование данных и обеспечивает их защиту от прослушивания и изменения.

Зачем нужен https-протокол?

• Обеспечивает безопасный обмен информацией между сайтом и девайсом пользователя
• Повышает доверие к сайту и поддерживает его репутацию в глазах посетителей
• Число сайтов, которые работают по незащищенному http-протоколу сокращается. HTTPS становится основным стандартом
• HTTPS входит в перечень ранжирующих факторов при поисковой выдаче Google

Как он работает?

Для корректной работы HTTPS используется сертификат, состоящий из открытого и приватного ключа.

Первый нужен клиенту, другой — серверу для шифрования и дешифрования запросов.

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

Почему это важно для сайта?

1. С начала 2017 года Google Chrome помечает некоторые сайты без https как небезопасные и понижает их в выдаче поисковых систем.
2. Если сайт обеспечивает надежную передачу данных (то есть использует протокол https), он может рассчитывать на дополнительный бонус при ранжировании.

Покупаем и устанавливаем SSL-сертификат — 7 простых шагов

Шаг 1 . Переходим на страницу заказа SSL-сертификатов.

Шаг 2 . Выбираем нужный тип сертификата.

Шаг 3 . Генерируем CSR-запрос.

CSR (Certificate Signing Request) — запрос на получение сертификата. Это текстовый файл, содержащий открытый ключ и закодированную информацию об администраторе домена.

Важно! Обязательно сохраните полученный при генерации CSR-запроса файл ключа. Он еще понадобится.

Шаг 4 . Заполняем анкетные данные сертификата (на английском языке), оплачиваем услугу любым удобным способом.

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

Важно! Письмо может быть отправлено только на «approver email», который вы указываете при заказе сертификата.

При необходимости отправку письма подтверждения SSL-сертификата можно повторить.

Письмо подтверждения выглядит так:

Шаг 6 . Дожидаемся выпуска сертификата и скачиваем его с сайта сертификационного центра или сайта-партнера.

Шаг 7 . Устанавливаем сертификат на хостинг, где размещается сайт. Для этого используем файл(ы) сертификата и файл ключа, полученный на 3-м шаге.

Предварительная подготовка сайта к переходу на https

Подготовка проходит в девять этапов.

1. Меняем все ссылки на страницы сайта (и элементы страниц), для которых устанавливается защищенное соединение.
2. Весь контент сайта, в том числе внешние модули, фото и скрипты, тоже должен подгружаться по протоколу https. Иначе браузер посчитает, что на странице есть небезопасные материалы и не покажет в адресной строке зеленый значок. Несмотря на то, что страница будет загружена по https.

Самая распространенная ошибка — размещение на сайте, который работает по https, не только защищенного, но и обычного контента. В таких случаях один или несколько элементов (обычно изображения, скрипты, Flash-файлы или CSS) загружаются на странице https с использованием незащищенного внешнего URL, начинающегося с http://.

Список незащищенных элементов на страницах со смешанным содержанием можно найти в консоли JavaScript (в некоторых браузерах она может называться отладчиком JavaScript) либо в инструментах разработчика браузера.

1. Убеждаемся, что все ссылки на сайте имеют относительный протокол или ведут на страницы, доступные по защищенному протоколу.
2. Исправляем все ссылки, в том числе на графику, консультанты, виджеты и другие внешние скрипты.

Убедитесь, что SSL-сертификат корректно настроен. Получить подробный анализ конфигурации SSL можно с помощью специального сервиса >>

1. Версия сайта с https должна быть доступной и работать без ошибок, как и версия с http. Для обеих версий файл robots.txt должен быть одинаковым.

Важно! Ранее рекомендовалось использовать параллельно два файла robots.txt и на период переклейки в Яндекс закрыть https-версии сайта от индексации Google. Сейчас этого не требуется. Был протестирован и утвержден вариант без закрытия от индексации в Google. Если доступны обе версии сайта, Google по умолчанию показывает в выдаче https-версию, а Яндекс делает это только после переиндексации.

В robots.txt должна быть строчка:

Host: https://www. адрес-сайта.ru/

Это значит, что https-версия является главным зеркалом.

Если все сделано верно, результат будет выглядеть так:

1. Добавляем обе версии сайта в Вебмастер Яндекса, указываем предпочтительный протокол в разделе «Настройка индексирования — Переезд сайта».

1. В Google Search Console добавляем сайт с протоколом https и подтверждаем права.

Google понимает, что http и https являются разными протоколами одного и того же сайта. Если он найдет работающий https протокол, по ходу переиндексации контента заменит http на https. Это произойдет даже без перенаправления и добавления https-версии в Google Search Console.

1. Ждем переиндексации сайта в Яндекс. Это произойдет, когда в индекс зайдут версии страниц с https, а версии с http выпадут из него.

Переклейка начинается через 2-3 недели. К сожалению, повлиять на ее скорость невозможно — это автоматический процесс.

Когда начнется переклейка, в Вебмастере Яндекса появится уведомление:

Также можно увидеть, что https-версия стала отображаться как основная:

Неглавное зеркало начнет выпадать из индекса Яндекса, главное — попадать в него:

У крупного ресурса все страницы не переиндексируются мгновенно.

1. После склейки сайтов настраиваем постраничный 301-редирект со страниц с http на страницы с https (за исключением файла robots.txt).

Нежелательно делать это прежде чем сайты будут признаны зеркалами. Иначе по правилам Яндекса при обработке перенаправлений страницы с редиректами исключатся из поиска.

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

Для перенаправления с http:// на https:// в.htaccess можно воспользоваться тремя способами:

• ручной корректировкой файла htacces;
• настройкой редиректов через панель управления хостингом;
• написанием программного скрипта настройки редиректов.

Результаты

Приведенный алгоритм действий подтвержден Яндексом и протестирован при переезде нескольких сайтов с хорошей историей. Он позволяет свести к минимуму потери трафика и позиции сайта в результатах поиска.

Однако служба поддержки Яндекса отвечает, что не может гарантировать 100% сохранение позиций сайта при склейке зеркал.

Как правило, на время переклейки сайта наблюдается временное ухудшение позиций в результатах поиска как в Яндекс, так и в Google. Но позиции в течение одного-двух месяцев полностью восстанавливаются.

Что еще нужно помнить?

1. Базовый алгоритм перевода сайта на https, который используем при переездах, доступен по ссылке >>
2. Удостоверьтесь в работоспособности и наличии доступов к почтовому ящику, на который высылается письмо со ссылкой на подтверждение выпуска сертификата.
3. Созданная версия с https доступна наряду с версией с http. Причем в robots.txt должна быть прописана строчка, указывающая на то, что https-версия является главным зеркалом.
4. После того как сайты склеятся, нужно настроить постраничный 301-редирект с http на https.
5. Если домен https был признан зеркалом домена http до переклейки (то есть https-версия была признана неглавным зеркалом), нужно расклеить зеркала, а затем выбрать https-версию в качестве главного зеркала.

Хотите заказать установку SSL-сертификата? Свяжитесь с нами по телефону: 8-800-200-94-60 , доб. 321 или оставьте запрос на

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

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

Сейчас пришло время задуматься об этом. На WordPress создать сайт довольно просто, но его надо довести до ума, правильно составить семантическое ядро, установить нужные плагины и многое другое.

Наверняка все уже слышали о безопасном протоколе HTTPS и необходимости перехода на него. Все крупные порталы, банки, интернет-магазины давно перешли на HTTPS, вот и нам пришло время заняться этим.

Для переезда на защищенный протокол HTTPS надо установить и настроить SSL сертификат на блог.

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

Этап 1. Настройка SSL сертификата на стороне хостинга

Сегодня, наверное все хостинги, предоставляют бесплатные SSL сертификаты для своих клиентов. В частности мои сайты находятся на , который бесплатно предоставляет SSL сертификат: SSL Let"s Encrypt. Вот его мы и будем устанавливать на сайт созданный на платформе WordPress. Вот так выглядит сайт в разных браузерах, пока не установлен SSL сертификат:

Итак начнем настройку сертификата SSL на сайте, я буду устанавливать на своем тестовом домене.

Заходим в панель управления хостинга TimeWeb, далее меню Дополнительные услуги:

В появившемся окне нажимаем SSL-сертификаты, нам выбор возможных сертификатов и наших доменов. Соответственно выбираем из списка сертификат SSL Let’s Encrypt (0 руб.) и нужное доменное имя.

После нажатия кнопки заказать выдает сообщение:

Заказ на SSL-сертификат успешно отправлен. О завершении установки сертификата будет выслано почтовое уведомление.

По истечении нескольких минут в списке подключенных услуг появится наш SSL сертификат:

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

Режим безопасного соединения

На этом первый этап установки SSL сертификата на сайт завершен, переходим ко второму этапу — внутренней настройке сайта.

Этап 2. Восстанавливаем внешний вид сайта

Итак мы установили SSL сертификат и перешли на безопасный протокол HTTPS. Но какой ужас — наш сайт исказился, все съехало и зелененького замочка, указывающего на защищенное соединение все-равно нет, и более того невозможно зайти в админку сайта.

Но прошу не паниковать, таблетка есть. Для этого необходимо вставить одну строку кода в файл.htaccess. Это процедуру необходимо проделать для всех хостингов.

На Таймвэбе действия такие: меню Файловый менеджер — находим Ваш сайт — папка public_html — редактирование файла .htaccess :

Открываем файл.htaccess на редактирование и в самый конец вставляем такую строку:

SetEnvIf X-HTTPS 1 HTTPS

Суть этого действия — сказать серверу чтобы он все открывал по протоколу HTTPS. После этого шага наш сайт открывается как и прежде, ура! Но это еще не все. Надо еще проделать ряд операций для окончательного перехода на защищенный протокол HTTPS.

Этап 3. Настройка блога после переезда на HTTPS

Для устранения проблемы входа в админ панель, в файл wp-config.php необходимо внести такую строку:

define (‘FORCE_SSL_ADMIN’, true);

Найди файл wp-config.php легко, он находится в том же каталоге где и.htaccess:

Вот мы подошли к последнему этапу перевода нашего сайта на безопасный протокол HTTPS.

Этап 4. Решаем проблему смешанного контента

Настройка ssl сертификата прошла успешно, перевод сайта на безопасный проток сделали, но все равно нет заветного зеленого замочка, почему? А все потому что в нашей базе есть ссылки с протоколом HTTP, т.е. на сайте присутствует смешанный контент. Для браузер очень важно, чтобы абсолютно все ссылки были защищенными, только тогда он считает страницу защищенной.

Решить данную проблему можно несколькими способами:

• изменить все ссылки в базе данных вручную

Все очень просто в строку поиска вводите НTTP/ HTTPS Remover, устанавливаете и активируете плагин. Никаких дополнительных настроек не нужно.

После этого действия закончена настройка ssl сертификата и наш сайт полностью переведен на защищенный протокол HTTPS. Осталось сообщить поисковым системам о нашей проделанной работе.

Этап 5. Информирование поисковых систем

Редактирование robots.txt

В первую очередь необходимо внести изменение в файл robots.txt. Сделать это можно на хостинге таким же способом как мы редактировали файлы.htaccess и wp-config.php. Отредактируйте как у меня на картинке:

Не забываем сохранять изменения.

Следующим шагом необходимо уведомить сервис Яндекс.Вебмастер о том, что Ваш сайт перешел на защищенный протокол HTTPS. Обязательным условием является подтверждение прав на сайт, но я думаю у всех это сделано.

Подтверждение в Google webmaster

Идем далее по нашему плану в переходе сайта на защищенный протокол. Следующий шаг — подтверждение прав в Google webmaster. Заходим по ссылке , добавляем, именно добавляем новый сайт с протоколом HTTPS (старый оставляем нетронутым) и подтверждаем на него свои права.

Последнее обновление:25/10/14

Сегодня мы узнаем, как установить логотип на WordPress – сайт

На днях потратила несколько часов на решение такой задачи. И самое смешное то, что задача-то элементарная, и я это уже делала раньше.

Логотип вставляла на сайт заказчика, и что-то заклинило! Пришлось даже обратиться за помощью к друзьям. Однако, у кого-то не было времени разобраться досконально в том, что у меня не получается, кто-то и сам этого не знает. От последних получила задание: как разберусь, написать об этом пост. Что и делаю, попутно вставляя логотип на этот блог.

Итак, задача состоит из трех элементарных действий:

1. Загрузить картинку с логотипом на хостинг.
2. Поставить эту картинку в шапку сайта и сделать ее кликабельной.
3. Расположить логотип так, как нужно.

И – самый главный пункт: сделать все это так, чтобы не нарушить работоспособности сайта!

Выполняем задачу, устанавливаем логотип:

1. Загрузить картинку логотипа на хостинг.Если не знаете, как это сделать, почитайте мою статью: « ». Сейчас Вы будете загружать файл не в корень сайта, а в папку images Вашей темы. Для этого на хостинге Вам нужно последовательно открыть папки:
   public_html → wp-content → themes → папка с Вашей темой→ imagesОбъясню, как это сделать в файловом менеджере Filezilla.

   

   Открываете папки двойным щелчком в окне «Удаленный сайт». При этом в адресной строке Вы сразу видите, в какой папке в данный момент находитесь.

   В левой части окна Filezilla под заголовком «Локальный сайт» показывается содержимое Вашего компьютера. Найдите папку, в которой находится файл логотипа.

   Теперь у Вас друг напротив друга находятся содержимое папок: слева – откуда Вы будете загружать логотип, справа – куда загружать.

   Двойным щелчком щелкаете на названии файла слева, через несколько секунд файл появится в папке справа (если не появился, вернитесь на один уровень вверх и снова откройте эту же папку).

2. Поставить логотип в шапку сайта и сделать его кликабельным.Чтобы это сделать, нам нужно написать код, отвечающий за вставку картинки на сайт и вставить его в файл, отвечающий за изображение шапки сайта.Код этот я привожу ниже:

   

   < a href = "Url Вашего сайта" > < img title = "logo" alt = "logo" src = "/адрес папки, в которой находится картинка/logo.png" / > < / a >

   Здесь:
   Url Вашего сайта – адрес Вашего сайта,
   адрес папки, в которой находится картинка – его Вы можете скопировать в адресной строке под заголовком «Удаленный сайт» (см. скриншот) ,
   logo.png – название файла с логотипом (расширение.png и прозрачный фон картинки – обязательны для логотипа).

   За шапку сайта отвечает файл header.php, туда и будем вставлять этот код.

   
   Помните!!! Всегда, прежде чем что-то менять в файлах сайта, делайте их копию к себе на компьютер, иначе можете так изменить, что сайт вообще не будет работать.
   Создайте на компьютере временную эталонную папку и туда скачайте header.php.
   Создайте еще одну папку – рабочую, в которую будете сохранять измененные файлы.
   Редактировать файлы можно по-разному. Правильнее всего: скачать файл на компьютер (в рабочую папку), отредактировать его в каком-нибудь текстовом редакторе (например, ), сохранить в ту же рабочую папку и оттуда снова закачать на хостинг.

3. Скачать файл с хостинга
   В Filezilla теперь надо сделать обратную операцию: скачать файл с хостинга. Файл header.php находится в папке с Вашей темой, эту папку Вам и надо открыть в правой части.
   Поскольку после предыдущего шага Вы находитесь в папке images, Вам надо вернуться на один шаг вверх. Для этого двойным щелчком кликните на изображении папки с двумя точками рядом (она стоит в списке первой) в нижней правой части.
   Слева открываете эталонную папку.
   Находите справа файл header.php и двойным щелчком копируете его в эталонную папку, а затем то же самое проделывайте, раскрыв слева рабочую папку.
   Теперь работаете в рабочей папке на компьютере. Выделяете файл, нажимаете правую кнопку мыши и в контекстном меню выбираете «Edit with Notepad++» (или открываете файл в другом текстовом редакторе).Вставлять наш код нужно после тега . А вот куда вставить – в этом и заключалась моя проблема. Файл header.php на сайте заказчика имел весьма сложную структуру с множеством разветвлений. А, признаюсь, в знании php я – если не полный ноль, то ушла от него очень недалеко. Я вставила код логотипа в самое логичное место, с моей точки зрения: рядом с названием сайта. Сохранила, закачала на сервер, обновила сайт – ничего! Смотрю исходный код страницы – вставленного кода нет!Возвращаюсь, проверяю код, ошибки не вижу. Что-то меняю, повторяю весь процесс – безрезультатно! Переношу код в другое место – никакого эффекта! Провозившись достаточно долго, обращаюсь в чат группы Дмитрия Маторы , у которого я год назад начала обучение фрилансерству, а с согруппниками мы до сих пор помогаем друг другу. В процессе переписки продолжала переставлять код, потому что в правильности его я не сомневалась. И вот, после очередной перестановки, логотип на сайте появился. Но… он был некликабелен. Мало того, некликабельным было и название сайта. Причем, поскольку сайт не мой, я не обратила внимания, было ли оно кликабельным изначально.Напоминаю, что я сейчас, описывая эту задачу, вставляю логотип на свой блог. Так вот, на моем блоге логотип появился сразу. И, главное, он – кликабелен, название блога – тоже.

   А вставила я код почти сразу после после тега , а точнее чуть ниже, в блоке header (сразу следом за тегом

   , который открывает этот блок).

   

   На сайте заказчика, в конце концов, вставила код так же – ближе к тегу , еще до всех операторов php и их разветвлений. И все получилось! И логотип, и название сайта – все кликабельное, как и полагается.

   Но без позиционирования логотип может встать не так, как Вам бы хотелось.

4. Спозиционировать логотип
   Я добавила такие стили в код после title=”logo” перед > :