Неполное руководство по SEO для одностраничных проектов Vue

SEO
Неполное руководство по SEO для одностраничных проектов Vue

Что такое SEO

Поисковая оптимизация (для краткости SEO) относится к поведению оптимизации, которое делается для улучшения количества и рейтинга веб-страниц в естественных результатах поиска поисковых систем (результаты некоммерческого продвижения), чтобы получить лучшие результаты от поисковых систем. , Больше бесплатного трафика и лучшее изображение.

SEM (Search engine marketing, поисковый маркетинг) включает в себя как SEO, так и платную оптимизацию продвижения бизнеса.

В этой статье в основном рассказывается, как выполнить SEO для внешнего кода и как добиться SEO для одностраничного проекта.

Как работают поисковые системы

Чтобы понять SEO, вы должны сначала понять принцип работы поисковых систем, принцип сложнее, и процесс упрощается следующим образом:

Краулеры сканируют веб-контент

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

Анализ веб-контента

После того, как сканер получит HTML-код, он проанализирует его содержимое. Как правило, необходимо удалить примеси, сегментировать слова и создать индексную базу данных. Что такое индексная база данных? Проще говоря, он записывает, в каких документах встречается слово, сколько раз оно появляется, где встречается и так далее. Зачем создавать индексную базу данных? для быстрого поиска.

Поиск и сортировка

Поиск будет запрашивать соответствующую базу данных индексов в соответствии с введенными вами ключевыми словами, а также обрабатывать и сортировать результаты.

Front-end кодирование для SEO

структура сайта

Структура сайта должна быть четкой. Структура общего веб-сайта имеет древовидную форму, которая обычно делится на три уровня: домашняя страница → страница канала (страница списка) → страница статьи (страница подробностей).

Структура сайта должна быть плоской. Чем меньше количество структурных слоев, тем лучше, как правило, не более трех слоев, и поисковые системы, как правило, не хотят продолжать сканирование в глубину, когда они достигают третьего слоя. Большинство веб-сайтов, таких как Nuggets, Snowball и т. д., имеют двухуровневую структуру веб-сайтов, а их домашняя страница и страница канала являются одной и той же страницей.

навигация

Страницы должны иметь простую навигацию. Навигация позволяет поисковым системам узнать структуру веб-сайта, а также позволяет поисковым системам узнать уровень текущей страницы в структуре веб-сайта. предположение:

  • Каждая страница содержит навигацию.
  • Навигация по цепочкам может использоваться для веб-сайтов с большим количеством контента.
  • Ссылка использует текстовую ссылку или, если это изображение, черезaltАтрибуты сообщают поисковым системам, куда ведет ссылка.

Канонический URL

Канонические, простые и понятные URL-адреса позволяют поисковым системам лучше сканировать контент. предположение:

  • Одна и та же страница соответствует только одному URL-адресу. Несколько URL-адресов могут быть перенаправлены с помощью 301.
  • URL-адрес может отражать содержимое веб-страницы и информацию о структуре веб-сайта. Например, www.a.com/blog, www.a.com/blog/123, www.a.com/article.
  • Держите URL-адрес как можно короче.
  • Минимизируйте переменные параметры, включенные в динамические URL.

Отправить карту сайта

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

Это очень полезный метод.Поисковая система Baidu просканирует все URL-адреса в карте сайта, но поисковая система Baidu просканирует его после того, как я отправил его в течение длительного времени.

robot.txt

Первый файл, который поисковая система сканирует при посещении веб-сайта, — robots.txt. В этом файле объявите часть веб-сайта, которую вы не хотите, чтобы пауки посещали, чтобы часть или все содержимое веб-сайта не могли посещать и индексировать поисковые системы, или вы можете указать через robots.txt что поисковые системы индексируют только указанный контент.

Разумные коды возврата HTTP

Различные коды возврата имеют разную логику обработки для поисковых систем.

  • Если сайт временно недоступен, когда веб-страница не открывается, рекомендуется использовать статус 503. 503 может сообщить пауку Baidu, что страница временно недоступна, повторите попытку через некоторое время.
  • Если паук Baidu оказывает слишком большое давление на ваш сайт для сканирования, постарайтесь не использовать 404, а также рекомендуется возвращать 503. Таким образом, паук Baidu через некоторое время снова попытается просканировать ссылку, и если сайт в это время простаивает, он будет успешно просканирован.
  • Некоторые веб-сайты надеются, что Baidu будет включать только определенный контент, например контент после просмотра, новые пользовательские страницы, которые накопились за определенный период времени, и так далее. В этом случае рекомендуется временно возвращать 403 для вновь опубликованного контента, а затем возвращаться к коду возврата нормального состояния после просмотра или обработки.
  • Пожалуйста, используйте 301 для возврата, когда сайт переносится или изменяется доменное имя.

соответствующее название

Заголовок сообщает поисковым системам основное содержание страницы.

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

Предлагаемое Baidu описание:

  • Главная: Название веб-сайта или название веб-сайта_Введение в услугу/Введение продукта
  • Страница канала: название канала_имя сайта
  • Страница статьи: название статьи_название канала_название сайта

подходящее описание

description — это краткое изложение содержимого веб-страницы. Наличие или отсутствие этого тега не влияет на вес страницы и используется только в качестве цели выбора для сводки результатов поиска. Рекомендуемая практика Baidu:

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

HTML-семантика

Семантика HTML — это использование тегов и атрибутов для описания контента. такСемантика HTML — краеугольный камень SEO. Общий совет:

  • Структура HTML должна быть четкой и лаконичной.
  • Перейти с помощью тега , не используйте js jump
  • Изображение плюс альтернативное описание
  • Статьи переносятся с тегом
  • ...

В этой части много контента, у меня есть примечание«HTML-семантика»

SEO для одностраничных проектов Vue

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

Если вы приняли одностраничный проект с разделением на переднюю и заднюю часть, и содержимое вашего веб-сайта не требует AJAX для извлечения содержимого и отображения содержимого, вы можете попробоватьprerender-spa-pluginЭтот плагин, этот плагин является плагином веб-пакета, может помочь вам отобразить вашу страницу через безголовый браузер во время процесса упаковки и сгенерировать соответствующий HTML. Конечно, это решение подходит для вашей статической маршрутизации, а количество маршрутов ограничено.

Если ваш контент динамически получен с помощью AJAX, то одностраничный проект vue может попробоватьprerender, Это служба предварительного рендеринга, которая может помочь вам рендерить страницы через автономный браузер и возвращать HTML. эта программа иprerender-spa-pluginОчень похоже, все они рендерят страницы через безголовый браузер, разница только во времени рендеринга,prerender-spa-pluginОн рендерится в процессе упаковки и предназначен только для рендеринга статических маршрутов иprerenderОн отображается во время запроса, поэтому можно отображать динамические маршруты. Ниже я остановлюсь наprerenderплан.

Использование пререндера

1. Установка

$ npm install prerender

2. Запускаем сервис server.js

const prerender = require('prerender');
const server = prerender();
server.start();

3. Тест

http://localhost:3000/render?url=https://www.example.com/

После вышеуказанных трех шагов вы запустили службу предварительного рендеринга и вернетесь "www.example.com/", весь процесс по-прежнему...prerender-node (Express),nginx.confПодождите, а какое это имеет отношение к пререндеру? Можно ли использовать промежуточное ПО напрямую? Вот как работает пререндеринг.

Принцип схемы пререндера

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

Стоит отметить, что служба пререндера не включает в себя безголовый браузер, поэтому браузер chrome необходимо установить самостоятельно. Таким образом, вся работа программы требует трех частей:

  • хром браузер
  • предварительная служба
  • ПО промежуточного слоя для предварительного рендеринга

Так как же служба пререндеринга узнает, что рендеринг страницы завершен? Служба Prerender определяет завершение загрузки страницы, подсчитывая количество необработанных запросов. Как только количество необработанных запросов достигает нуля, служба ждет некоторое время (по умолчанию 500 мс), а затем сохраняет HTML-код.

Лучшие практики для пререндеринга

После практики требуется время, чтобы запросить страницу, отображаемую с помощью пререндеринга, около 2 с при быстром и до 8 с при медленном. Вообще говоря, время запроса в течение 3 секунд является лучшим. Итак, я начал со следующих аспектов, чтобы изучить метод оптимизации пререндеринга.

Сокращение времени запроса ресурсов

Ресурсы, которые влияют на время рендеринга предварительного рендеринга, в основном включают ресурсы запроса js и ресурсы запроса API.Время запроса API обычно определяется бэкэндом, поэтому я думаю, как сократить время запроса ресурсов js. Как правило, адрес запроса ресурса, отображаемый службой предварительного рендеринга, определяется URL-адресом запроса страницы, поэтому, как правило, это онлайн-адрес.Если мы развернем службу предварительного рендеринга на сервере веб-сайта и позволим службе предварительного рендеринга запрашивать ресурсы для локального , то ресурсы можно сократить.Время на запрос.

Если ваш онлайн-сервис с поддержкой CDN, то есть еще одно преимущество локальных ресурсов, то есть он может экономить трафик CDN.

Оптимизация параметров пререндеринга

prerender предоставляет некоторые пользовательские параметры

pageDoneCheckInterval: Этот параметр является временем таймера для пререндеринга, чтобы проверить, завершен ли запрос страницы. По умолчанию 500 мс, то есть каждые 500 мс, чтобы проверить, равно ли количество незавершенных запросов нулю. Я изменил его на 100 мс, чтобы увеличить частоту его проверка.

waitAfterLastRequest: этот параметр представляет собой время ожидания после завершения последнего запроса. Значение по умолчанию – 500 мс. Это в основном связано с тем, что после завершения запроса обновление страницы и рендеринг займет некоторое время. Если он возвращается немедленно, запрошенные данные могут не отображаться. вовремя.Я изменю время на 200 мс.

плагин пререндеринга

httpHeaders — возвращает разумные коды состояния HTTP.

Добавьте плагин httpHeaders, чтобы изменить код состояния HTTP возвращаемого HTML. Способ его добавления следующий:

var prerender = require('prerender');
var server = prerender()
server.use(prerender.httpHeaders());
server.start();

Пререндер устанавливает код состояния HTTP, возвращаемый страницей, идентифицируя тег в

. 
<meta name="prerender-status-code" content="404">

Если вам нужно настроить редирект 301, вы можете сделать это

<meta name="prerender-status-code" content="301">
<meta name="prerender-header" content="Location: http://www.xxx.com">

blockResources - не нужно ждать ресурсы изображения

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

var server = prerender({
    logRequests: true
});

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

2019-07-17T04:34:03.180Z - 47 http://xxx.com/css/chunk-f4a02584.da8dca38.css
2019-07-17T04:34:03.180Z {
  source: 'network',
  level: 'error',
  text: 'Failed to load resource: net::ERR_INVALID_ARGUMENT',
  timestamp: 1563338043130.37,
  url: 'http://xxx.com/wefid/css/chunk-f4a02584.da8dca38.css',
  networkRequestId: '1000039068.65' 
}

2019-07-17T04:34:03.924Z + 3 http://xxx.com/img/erweima_wx.a84d82ef.jpg
2019-07-17T04:34:03.924Z + 4 http://xxx.com/img/erweima_wb.06971584.png

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

  • HTML-файл веб-страницы
  • Скриншоты веб-страниц (просмотр или полноэкранный режим)
  • PDF-файлы веб-страниц
  • HAR-файлы для веб-страниц
  • Выполните свой собственный javascript и верните json и HTML

Очевидно, что эти функции должны подгружать нужные вам ресурсы CSS или изображения, иначе будут проблемы с отображением страницы. В настоящее время, если вам нужно только удовлетворить потребности SEO и не нужноPrerender.comфункция, тоblockResourcesПлагины могут пригодиться. Плагины добавляются следующим образом:

var prerender = require('prerender');
var server = prerender()
server.use(prerender.blockResources());
server.start();

использоватьblockResourcesПосле плагина ресурсы изображения и ресурсы шрифта будут прерваны (заброшены).

Пользовательское время окончания рендеринга

Если вы хотите более детально контролировать время возврата пререндеринга, заканчивая раньше или позже, вы можете использовать этот флаг.window.prerenderReady.

Сначала нужно установитьwindow.prerenderReadyложно, пререндер обнаруживаетwindow.prerenderReadyзаfalseПосле этого он будет ждать, пока вы установите его какtrueЗатем вернуть результат.

<script> window.prerenderReady = false; </script>

Когда ваш рендеринг завершен, обычно после завершения запроса интерфейса и завершения рендеринга.

window.prerenderReady = true;

Это дает вам больше контроля над тем, когда рендеринг заканчивается.

включить кеш

Здесь есть два аспекта кэширования: один — HTTP-кэширование (кэширование в браузере), а другой — кэширование результатов рендеринга.

Прежде всего, HTTP-кэширование может предотвратить частые запросы ресурсов службой предварительного рендеринга, что экономит время передачи. Я не буду расширять это, я хочу рассказать о кеше результатов рендеринга. Промежуточное ПО prerender предоставляет два метода кэширования, redis или memcached, возьмем redis в качестве примера:

$ npm install redis

var redis = require("redis"),
client = redis.createClient();

prerender.set('beforeRender', function(req, done) {
	client.get(req.url, done);
}).set('afterRender', function(err, req, prerender_res) {
	client.set(req.url, prerender_res.body)
});

Вы можете выполнять детальное управление с помощью двух хуков beforeRender и afterRender.Для контента, который часто меняется, он не кэшируется или кэшируется на короткое время, а для контента, который меняется реже, установите долгосрочный кеш. Включение кеша может не только ускорить время возврата, но и снизить нагрузку на сервер.

Статистика и мониторинг

Статистику и мониторинг можно делать в afterRender промежуточного ПО.

prerender.set('afterRender', function(err, req, prerender_res) {
  if(err){
    // 这里是错误监控代码
    // ...
    // return
  }
  let {headers: req_headers, originalUrl} = req
  let {headers: res_headers, body} = prerender_res
  // 这里是统计代码，可以保存请求和返回的相关信息
})

резюме

С помощью вышеуказанных методов оптимизации (за исключением настройки времени окончания рендеринга и открытия кэша) я стабилизировал время запроса HTML примерно на уровне 2,5 с.Однако эффект от этого решения не идеален, время отклика велико, параллелизм очень низок, а стоимость обслуживания относительно высока.Поэтому не рекомендуется использовать этот метод для SEO-оптимизации в производственной среде. Лучше выбрать рендеринг на стороне сервера. Если потребности SEO четко определены на ранней стадии создания проекта, нет необходимости бросать так многое для улучшения SEO одностраничных проектов. !

Суммировать

Это все, что я хочу сказать о внешнем кодировании SEO, в двух словах, это

  • Соответствующие HTML-теги и атрибуты
  • Разумные коды состояния HTTP
  • Sitemap & robot.txt
  • Соответствующая схема рендеринга
Категории