Недавно я вместе с коллегами написал официальный веб-сайт компании для ПК.Основываясь на личных привычках, циклах и потребностях в разработке, я, наконец, решил использовать vue-cli для быстрой разработки (потому что вторичный пользовательский каркас на основе vue-cli был написан ранее). . Выйдя в интернет, босс сказал, давайте вернемся к статическим страницам, SEO в SPA очень плохое. Этот...
О чем пойдет речь в этой статье:
- Введение в ситуацию перед использованием пререндера
- Используйте пререндеринг позы
(наступить на яму) - Виньетка: перенаправление nginx
- Суммировать
перед использованием пререндера
Наш официальный сайт представляет собой особенно «чистый» проект vue-cli, что означает, что это одностраничное приложение, упакованное с помощью webpack.
С точки зрения маршрутизации выбран vue-router, а режим — хеш-режим, потому что браузеры IE и мобильные браузеры учитывать не нужно.(Особенно маленький гоблин из WeChat), поэтому на настройку роутинга особого внимания не обращал.
С точки зрения разработки страницы, поскольку она разрабатывается двумя людьми, я стараюсь разделить одну страницу на режим разработки нескольких компонентов, чтобы не мешать друг другу, а последующие изменения или повторное использование относительно гибки.
balabala... Через несколько дней наш официальный сайт успешно запустился, только в адресе будет "#", вроде ничего страшного в этом нет. Пока босс не пожаловался на уродливые URL-адреса и нестатические страницы в группе, а затем разрешил мне использовать вместо них статические страницы T T
Это погружает меня в медитацию...
- Вместо этого переписать один раз с помощью HTML/CSS/JS?
- SSR с Nuxt?
- Что еще я могу сделать...
Не знаю почему, но я вдруг вспомнил, что уже видел пререндеренный плагин webpack :)
Дебют prerender-spa-плагина
Что такое prerender-spa-plugin? Детскую обувь, о которой вы мало знаете, можно телепортировать, чтобы увидеть...prerender-spa-plugin Github && Введение в рендеринг на стороне сервера vue
режим истории
Измените исходный режим хеширования на режим истории, откажитесь от уродливого «#», а также проложите путь для пререндеринга.Если это хеш-режим, может не быть возможности нормального предварительного рендеринга.
конфигурация веб-пакета
Поскольку мы используем новую версию vue-cli, файл конфигурации веб-пакета не был открыт, нам нужно изменить конфигурацию нашего веб-пакета, изменив vue.config.js (который должен быть интегрирован с помощью плагина webpack-merge).
const path = require('path')
const PrerenderSpaPlugin = require('prerender-spa-plugin')
// ...
// ...
configureWebpack: {
plugins: [
new PrerenderSpaPlugin(
// npm run build的输出目录
path.resolve(__dirname, './raw'),
// 需要进行预渲染的页面
['/', '/about'], {
captureAfterTime: 5000,
maxAttempts: 10,
}
)
]
}
Общая идея приведенной выше конфигурации заключается в том, чтобы перейти в соответствующий каталог, предварительно загрузить и отобразить соответствующие страницы в статические страницы в соответствии с информацией о маршрутизаторе и сохранить статические страницы в виде независимых папок.
На следующем рисунке показан каталог файлов без пререндера↓
Можно видеть, что, как и пакетный вывод обычных одностраничных приложений, запись index.html используется для динамического рендеринга каждой страницы.
Каталог после использования пререндера такой↓
Существует дополнительная папка about, которая содержит файл index.html, который является статической страницей страницы «/ about», так что, когда мы обращаемся через URL-адрес, мы можем напрямую обращаться к статической странице about, не требуя браузера. для компиляции этой страницы.
Таким образом, поисковые системы могут напрямую сканировать весь контент нашей страницы, а не одну стартовую страницу приложения!
Затем index.html в корневом каталоге также становится статической страницей страницы '/', что завершает статизацию страницы нашего официального веб-сайта, это так просто~
Поскольку основной состав плагина prerender-spa-plugin также является основным составом Vue, его очень легко использовать в проекте Vue, но если это крупномасштабный проект, возможно, ему все же придется идти в направлении SSR. .
Следующее изображение показывает исходный код для доступа к главной странице официального сайта в Chrome -
Виньетка: перенаправление nginx
После завершения рефакторинга онлайн-проекта необходимо обратить внимание на некоторые «эффекты бабочки» —
Возьмем, к примеру, наш официальный веб-сайт, информация о некоторых компаниях уже была включена в энциклопедию ранее, а включенная ссылка на источник — это ссылка на старую статическую страницу — «xxx/about.html», которая становится холодной, как только вы ее посещаете, и страница больше не существует.
В начале я планировал написать пустой html, отвечающий за переход, но об этом я подумал позже, что не способствует SEO страницы, поэтому задумался, можно ли использовать перенаправление nginx для решения этой проблемы .
На самом деле это заняло много времени, когда я впервые написал это, я перенаправил соответствующий путь в локации, но обнаружил, что эффект не идеален. Позже я проверил восток и запад и обнаружил, что для решения этой проблемы можно использовать переписывание.
server {
listen ......
......
rewrite ^about.html https://targetlink.com/about/ permament;
location / {...}
}
Добавление строки перезаписи в nginx может навсегда перенаправить ссылку «xxx/about.html» на целевой URL-адрес, поэтому нет необходимости писать «трамплинную» страницу.
Суммировать
SEO SPA - вечная тема, и решений не так много, так как решение использовать SPA означает, что проект не имеет сильного спроса на SEO, но в контексте данной статьи нам нужно подумать о самое удобное и безболезненное решение.
SSR естественно первое решение, но оно действительно вредное, да и терять не стоит, лучше переписать на статичную страницу. Позже я обнаружил, что схема пре-рендеринга нам очень подходит, поэтому я попробовал эту схему.В процессе опробования этой схемы я также попробовал автоматическое развертывание gitlabэто еще одна дыра, в ближайшее время должна быть еще одна статья про эту яму~