Как сгенерировать sitemap.xml с помощью Javascript для URL-адресов динамических страниц
Независимо от того, над каким веб-приложением вы работаете, когда оно подключено к сети и у вас появятся пользователи, вы хотите, чтобы Google проиндексировал ваш сайт. Это базовый SEO 101.
Вы хотите, чтобы все соответствующие страницы вашего веб-сайта были проиндексированы и, надеюсь, занимали высокие позиции в поиске Google. Все поисковые системы, не только Google, рекомендуют вам добавить файл sitemap.xml в корневую папку вашего сайта со всеми соответствующими ссылками, которые должны быть проиндексированы.
Все идет нормально. Если у вас есть сайт с несколькими статическими страницами и впоследствии вы добавляете несколько URL-адресов страниц, вы создаете и изменяете файл sitemap.xml вручную. Для более крупных проектов с десятками или сотнями статических URL-адресов вы можете использовать плагины или написать собственный код для создания нового файла карты сайта на основе ваших статических маршрутов всякий раз, когда вы создаете приложение для повторного развертывания.
Но что, если у вас есть динамически созданные URL-адреса страниц, такие как страницы пользователей, статьи или комментарии, которые вы хотите проиндексировать? Если существуют тысячи или десятки тысяч таких динамически создаваемых URL-адресов, добавлять их вручную просто невозможно. Также нецелесообразно создавать новую карту сайта каждый раз, когда вы создаете свое приложение, учитывая, что вам нужны данные из вашей базы данных для получения всех соответствующих URL-адресов.
Для нашего Эпилоге приложения Vue.js мы выбрали простое решение Javascript, которое вы можете реализовать в своем приложении администрирования или в любом другом месте, где у вас есть доступ к вашему бэкэнду / базе данных.
Создание sitemap.xml - это базовая процедура SEO 101, которая необходима даже для динамически добавляемых URL-адресов страниц
Зачем вообще использовать карту сайта? Не может Google самостоятельно найти все релевантные URL-адреса?
Думаю, прежде чем продолжить чтение, вы могли бы спросить себя, действительно ли вам нужна карта сайта для динамически создаваемых страниц, индексируемых Google. На самом деле, когда мы запустили Epiloge, мы не позаботились о создании карты сайта со всеми URL-адресами профилей пользователей, статей, проектов и страниц организации. И Google по-прежнему проиндексировал многие из этих URL-адресов, потому что мог найти их по ссылкам, размещенным в другом месте, как в Epiloge, так и в социальных сетях. И эти проиндексированные страницы вообще не получили плохого рейтинга в Google - робот Googlebot не наказывает веб-сайты за отсутствие карты сайта.
Если вас на самом деле не интересует индексирование всех ваших динамических URL-адресов Google, вы можете перестать читать здесь. Решением может быть «ничего не делать» или только включение ваших статических страниц в рукописный файл sitemap.xml.
Аналогичным образом, если вы уже работаете с такими фреймворками, как nuxt.js, у которых есть отличные решения для создания карт сайта для динамически генерируемых URL-адресов, вам, вероятно, не понадобится описанное здесь простое решение Javascript.
Робот Googlebot не наказывает веб-сайты за отсутствие карты сайта, но обычно может находить только часть всех релевантных динамических URL-адресов
Создайте функцию Javascript, которая создает XML-файл с помощью DOM
Решение, которое мы используем, включено в наше приложение администрирования, которое имеет доступ к нашей базе данных через серверную часть node.js. Мы используем копию нашего общедоступного приложения Vue.js и добавляем административный раздел для создания нашего административного приложения. Один из этих административных компонентов используется для создания базового файла sitemap.xml.
createSitemap() {
var doc = document.implementation.createDocument('', '', null);
//create the outer tag
var urlset = doc.createElement("urlset");
urlset.setAttribute("xmlns"," http://www.sitemaps.org/schemas/sitemap/0.9");
var url = ''; var changefreq = ''; var loc = '';
//first create static sites (note, that this is a selection)
var staticSites = ['terms', 'privacy', '', 'about'];
for (var i=0; i < staticSites.length; i++) {
url = doc.createElement("url");
loc = doc.createElement('loc');
loc.innerHTML = 'https://www.epiloge.com/' + staticSites[i];
changefreq = doc.createElement("changefreq");
changefreq.innerHTML = 'monthly';
url.appendChild(loc);
url.appendChild(changefreq);
urlset.appendChild(url);
}
//Let's add the dynamic data here
doc.appendChild(urlset);
},
Сначала мы создаем пустой документ, который также можем использовать для добавления наших xml-тегов. Файл sitemap.xml должен включать всю информацию во внешнем теге urlset с атрибутом xmlns. Затем мы добавляем все соответствующие статические URL-адреса. Поскольку эти URL-адреса обычно не сильно меняются, вы можете написать этот код один раз, и вам нужно будет только обновлять или добавлять статические сайты всякий раз, когда они меняются.
Тег loc необходим для указания самого URL-адреса, а тег changefreq сообщает Google и другим поисковым системам, как часто этот документ может обновляться. Обратите внимание, что Google использует эту информацию только в качестве общего руководства. Вы также можете добавить тег lastmod, если знаете, когда соответствующие URL-адреса были в последний раз изменены.
Добавьте свои динамические URL-адреса так же, как вы добавляли свои статические URL-адреса
Единственная разница для ваших динамических URL-адресов заключается в том, что вы должны сначала получить соответствующую информацию из своей базы данных и после этого добавить эту информацию в свой xml-документ. В нашем приложении администрирования мы сначала получаем все URL-адреса страниц для пользователей, пользовательского контента и организаций и добавляем их один за другим в функцию createSitemap (), которую мы вызываем только после того, как мы получили все данные из нашей базы данных.
//append dynamic user urls (EXAMPLE)
for (var i=0; i < this.users.length; i++) {
url = doc.createElement("url");
loc = doc.createElement('loc');
loc.innerHTML = 'https://www.epiloge.com/@' + this.users[i].username;
changefreq = doc.createElement("changefreq");
changefreq.innerHTML = 'weekly';
url.appendChild(loc);
url.appendChild(changefreq);
urlset.appendChild(url);
}
Наконец, вы хотите загрузить файл create sitemap.xml и добавить его в свою внутреннюю структуру.
//code you can use to serialize your xml and then download the file
//serialize the xml file to txt
var oSerializer = new XMLSerializer();
var xmltext = oSerializer.serializeToString(doc);
xmltext = '<?xml version="1.0" encoding="UTF-8"?>' + xmltext;
//download the file
var pom = document.createElement('a');
var filename = "sitemap.xml";
var pom = document.createElement('a');
var bb = new Blob([xmltext], {type: 'text/plain'});
pom.setAttribute('href', window.URL.createObjectURL(bb));
pom.setAttribute('download', filename);
pom.dataset.downloadurl = ['text/plain', pom.download, pom.href].join(':');
pom.draggable = true;
pom.classList.add('dragout');
pom.click();
Добавление загруженного файла sitemap.xml в серверную часть должно быть простым. Просто скопируйте его куда хотите, мы добавляем его в нашу папку / dist / в нашем бэкэнде node.js и добавляем к нему конкретный маршрут в нашем файле server.js. Вы также можете добавить свой sitemap.xml в файл robots.txt, но это не обязательно. Наконец, после повторного развертывания серверной части вы можете сообщить Google в Консоли поиска Google, что вы добавили sitemap.xml или обновили его. Google по-прежнему потребуется время, чтобы получить доступ ко всем ссылкам, которые он найдет в вашей карте сайта, но вы сразу же получите ответ от консоли поиска Google, сколько ссылок он нашел в карте сайта.
//included in the server.js file of our node.js backend
app.get('/sitemap.xml', function(req, res) {
res.sendFile(path.join(__dirname + '/dist/sitemap.xml'));
});
И это в основном все. Подводя итог, все, что вам нужно для этого простого решения Javascript для создания карты сайта, которую вы можете вручную добавить в свой бэкэнд, - это A. приложение для администрирования или раздел администрирования где-нибудь в вашем интерфейсе и B. вам необходимо регулярно создавать новую карту сайта. xml (например, еженедельно), чтобы Google знал о созданных новых динамических URL-адресах. Наконец, обратите внимание, что документ sitemap.xml должен включать только 50 000 URL ... если у вас их больше, подумайте о создании карты сайта из карт сайта.
Если вы хотите увидеть полный файл Vue.js, который включает функцию sitemap.xml, вы можете найти его на Github здесь.
Несколько слов о sitemap.xml и Vue.js, React.js, Angular и т. д.
Если вы работаете над приложением, которое использует структуру Javascript одностраничного приложения (SPA), вы, вероятно, читали о проблеме, с которой SPA связаны с поисковыми системами и любым другим сайтом, пытающимся сканировать контент (например, социальный обмен через Twitter или Facebook). . За исключением робота Googlebot, сканеры не смогут запускать ваше приложение Javascript и просто обнаруживают пустые страницы.
Google достаточно сложен, чтобы проиндексировать содержимое вашего приложения Vue.js или React.js, запустив ваше приложение Javascript локально в своей структуре индексирования. Это также, как правило, не наказывает SPA за статические веб-сайты, предоставляющие HTML, если ваш веб-сайт хорошо адаптирован для работы на мобильных устройствах, быстро загружается и не содержит ошибок.
Однако другие поисковые индексы не будут индексировать ваши URL-адреса. Добавление файла sitemap.xml для всех динамических URL-адресов, которые вы хотите проиндексировать или к которым должны получить доступ роботы поисковых систем и сканеры, ДРУГИЕ, кроме Google, в этом не поможет.
Существуют различные решения этой проблемы, которые не относятся к этому руководству по легкому созданию карты сайта с помощью Javascript. Рендеринг на стороне сервера (SSR), предварительный рендеринг или предоставление сканерам (кроме Googlebot) динамически визуализируемых рудиментарных HTML-файлов (SSR light).
Connect with Axel Wittmann at Epiloge
