Как настроить StackPath CDN для получения максимальных преимуществ SEO

Каждый владелец веб-сайта знает, насколько важна скорость сайта для успеха в Интернете. Это не только важный фактор ранжирования, но также было показано, что он оказывает существенное влияние на коэффициент конверсии, независимо от того, что вы пытаетесь продать. Поэтому использование CDN должно быть легкой задачей.

Сеть доставки контента значительно сокращает время загрузки вашей страницы, сокращая физическое расстояние между статическими активами вашего сайта (изображениями, JS, CSS и т. д.) и браузером пользователя. Однако многие владельцы сайтов не решаются сделать шаг, потому что настройка может быть сложной, а плохо настроенная CDN может принести больше вреда, чем пользы. Тем не менее, важно, чтобы вы не отказывались от всех преимуществ только потому, что могут быть некоторые потенциальные недостатки. Если вам неудобно заниматься настройкой самостоятельно, вы всегда можете нанять внештатного разработчика, который сделает это за вас.

В сегодняшней статье мы познакомим вас с настройкой StackPath (MaxCDN), но изложенные здесь концепции можно применить к любой CDN. Давайте начнем.

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

Создать учетную запись

Если вы еще этого не сделали, создайте учетную запись на StackPath. После этого добавьте новый сайт в свою учетную запись.

Обратите внимание на «Адрес пограничного сайта», указанный в вашей учетной записи (в правом верхнем углу). Он понадобится нам позже.

Подготовка доменного имени

В целях SEO мы хотим, чтобы все наши статические ресурсы обслуживались из нашего собственного поддомена, а не URL-адреса StackPath. В конце концов, мы не хотим, чтобы CDN получал признание за какой-либо наш контент.

Это требует некоторых изменений на уровне домена. Войдите в свою учетную запись управления доменом и убедитесь, что у вас есть возможность добавлять DNS-записи A и CNAME . Ваш провайдер домена должен предоставить вам более точную информацию о том, как это сделать. Вы также можете проверить, включены ли инструкции для вашего провайдера в эту справочную статью StackPath.

Запись A необходима, чтобы связать ваше доменное имя с IP-адресом вашего сервера. Возможно, у вас уже есть эта запись, и в этом случае перейдите к записи CNAME.

Запись CNAME будет использоваться для указания вашего поддомена cdn.yourdomain.com на адрес края сайта, который мы получили на первом этапе. После того, как вы добавили эту запись и достаточно долго ждали, пока DNS распространится, вы сможете открыть cdn.your.com в своем браузере и увидеть полную копию своего сайта. Аккуратный!

Запрос сертификата SSL для вашего поддомена

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

Чтобы запросить бесплатный SSL-сертификат:

• В своей учетной записи StackPath откройте сайт
• Откройте вкладку EdgeSSL.
• В разделе «Запросить бесплатный SSL-сертификат» нажмите кнопку «Создать бесплатный SSL».
• Вам будет предложено добавить еще одну запись CNAME в ваш домен для подтверждения права собственности. Добавьте запись в свою учетную запись управления доменом
• После распространения изменений DNS ваш SSL-сертификат будет установлен. Для меня это заняло несколько часов.

Я не стал вдаваться в подробности, поскольку в StackPath есть пошаговое руководство по этому процессу, которому вы можете следовать здесь.

Если у вас возникнут проблемы при добавлении новой записи CNAME, вы можете следовать этому руководству от Comodo (компании, которая выдаст ваш SSL-сертификат).

Итак, теперь у вас должна быть копия вашего сайта, доступная по адресу https://cdn.yourdomain.com. Удивительные шары!

Настройка вашего CDN для SEO

Если вы чем-то похожи на меня, то наличие копии всего вашего сайта на другом субдомене должно звучать как кошмар! К счастью, мы можем легко избежать любых негативных последствий SEO, выполнив несколько простых шагов:

Убедитесь, что все ваши страницы имеют канонический тег

Каждая страница вашего сайта должна иметь канонический тег, чтобы Google мог определить, какая версия вашего контента является исходной, а какая — просто копией. Канонический тег выглядит так:

 <link rel="canonical" href="http://yourdomain.com" />

В WordPress вы можете добавить канонический тег на все свои страницы с помощью плагина, такого как SmartCrawl или Yoast SEO.

Убедитесь, что все статические ресурсы имеют канонические заголовки HTTP.

Добавить канонический тег в HTML ваших страниц достаточно просто, но как насчет статических ресурсов, таких как изображения? Как вы можете указать Google, какую версию конкретного изображения использовать? Канонический заголовок HTTP является ответом. Этот HTTP-заголовок был введен Google именно для этого сценария. Наличие его в вашем ответе укажет Google, что версия на вашем основном сайте является источником, а версия на CDN — просто копией, и что ваш основной сайт должен получить кредит.

Так как же добавить этот заголовок ко всем ресурсам, обслуживаемым CDN? Вы можете сделать это, добавив шапку на свой основной сайт. Поскольку все заголовки с исходного сайта копируются CDN, канонический заголовок также будет скопирован. Чтобы добавить заголовок на исходный сайт, добавьте это в свой файл .htaccess:

 <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|webp|html)(\.gz)?(\?.*)?$"> <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} !=on RewriteRule .* - [E=CANONICAL:http://%{HTTP_HOST}%{REQUEST_URI},NE] RewriteCond %{HTTPS} =on RewriteRule .* - [E=CANONICAL:https://%{HTTP_HOST}%{REQUEST_URI},NE] </IfModule> <IfModule mod_headers.c> Header set Link "<%{CANONICAL}e>; rel=\"canonical\"" </IfModule> </FilesMatch>

Убедитесь, что ничего из CDN не проиндексировано

Канонизация всего в CDN — отличный способ избежать штрафов за дублирование контента, но Google по-прежнему может индексировать URL-адреса CDN, что не очень хорошо. К счастью, StackPath позволяет легко избежать этой проблемы с помощью EdgeRules.

В своей учетной записи StackPath перейдите на вкладку EdgeRules и в нижней части экрана нажмите кнопку «Добавить правило доставки».

В открывшейся форме добавьте следующие значения и нажмите «Сохранить»:

Эти значения в основном переводятся как: при открытии любого URL-адреса CDN добавьте «x-robots-tag: noindex, follow» в заголовки HTTP. Это сообщит Google, что вы не хотите индексировать какой-либо URL-адрес CDN. Вы можете узнать больше о заголовке x-robots-tag в этой статье MOZ.

Это все! Ваши статические ресурсы теперь доступны в CDN, Google знает, где находится реальная версия каждого ресурса, и ничего не нужно индексировать. Вам по-прежнему необходимо настроить свой веб-сайт для использования CDN-версии всех файлов CSS, JS и изображений. В WordPress это можно сделать с помощью такого плагина, как W3 Total Cache.