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

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

Хотя мы знаем, что поисковые роботы теперь будут выполнять JavaScript страницы, неясно, как долго робот будет ждать завершения загрузки вашего контента. Что мы действительно знаем, так это то, что сайты, которые загружаются быстрее, как правило, работают лучше, а это означает, что вам не нужно ждать дорогостоящего вызова API для отображения основного контента, что повысит производительность вашего сайта. Хотя вы можете решить использовать AJAX для получения комментариев к своему сообщению, чтобы обеспечить отображение последнего содержимого, обычно нет причин, по которым само сообщение в блоге не может быть отображено на стороне сервера или доставлено как статическое содержимое.

Использование фреймворка вроде Nuxt упрощает создание статически сгенерированного сайта. Для этого урока вам потребуется установить Node версии 8.9.0 или более поздней. В этом руководстве предполагается, что вы понимаете основы работы с npm. Если вы не знакомы с npm, я рекомендую прочитать эту статью из Nodesource: Абсолютное руководство по использованию npm для новичков.

В каталоге, в котором вы собираетесь собрать свой проект, сначала создайте package.json файл с помощью команды npm init. Эта команда запустит мастер в вашем терминале, который позволит вам указать базовую конфигурацию вашего проекта. Пройдя через мастер, у вас будет файл, который выглядит примерно так:

{
  "name": "sample-blog",
  "version": "1.0.0",
  "description": "A sample blog using Nuxt",
  "main": "index.js",
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
  }, 
  "author": "Jessie Barnett", 
  "license": "MIT", 
  "dependencies": { 
    "nuxt": "^2.14.5" 
  } 
}

Следующим шагом будет установка Nuxt, выполнив команду npm install nuxt. Эта команда добавит его в ваш package.json и создаст файл package-lock.json. После установки Nuxt нам нужно добавить два сценария в файл package.json для поддержки запуска приложения в режиме разработки и создания статического сайта.

{
  "name": "sample-blog", 
  "version": "1.0.0", 
  "description": "A sample blog using Nuxt", 
  "main": "index.js", 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "nuxt", 
    "generate": "nuxt generate" 
  }, 
  "author": "Jessie Barnett", 
  "license": "MIT", 
  "dependencies": { 
    "nuxt": "^2.14.5" 
  } 
}

Nuxt - это самоуверенный фреймворк, который использует заранее определенные структуры каталогов, чтобы выяснить, как объединить ваш сайт. Чтобы создать страницу для своего веб-сайта, вам нужно создать каталог pages, используя mkdir pages. Внутри этого каталога вам нужно будет создать index.vue файл, который будет страницей, обслуживаемой переходом по маршруту / вашего веб-сайта.

Сейчас мы создадим базовый шаблон для нашей целевой страницы. Обновите свой index.vue файл, добавив в него следующий код:

<template> 
  <p>Landing Page</p> 
</template>

Если вы запустите команду npm run dev и перейдете к http://localhost:3000, вы увидите визуализированный шаблон. Теперь давайте добавим динамический маршрут для наших сообщений в блоге. Мы будем создавать ярлык, который будет отмечен именем файла, начинающимся с символа подчеркивания. Создадим каталог blog в каталоге pages и добавим в него файл _slug.vue.

Чтобы увидеть динамическую страницу в действии, мы будем использовать ловушку asyncData, предоставленную Nuxt. Этот хук принимает объект контекста, который имеет довольно много полезных атрибутов, но мы сосредоточимся на route. Мы можем получить параметр пути из context.route.params.slug, где slug представляет то, что мы назвали файлом. Если бы мы вместо этого вызвали файл _post.vue, нам нужно было бы адресовать его через context.route.params.post. Нашему хуку нужно будет вернуть объект с этим параметром, чтобы отобразить его в шаблоне.

Обновите свой _slug.vue файл, добавив в него следующий код:

<template> 
  <p>{{ blogPost }}</p> 
</template> 
<script> 
export default { 
  asyncData ({route}) { 
    return { blogPost: route.params.slug } 
  } 
}
</script>

Предполагая, что ваш сервер разработки все еще работает, если вы перейдете к http://localhost:3000/blog/my-post, вы увидите, что страница распечатывает динамический параметр URI.

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

Откройте ваш index.vue файл и обновите его, чтобы он содержал следующий код:

<template> 
  <div> 
    <h1>Articles</h1> 
    <ul> 
      <li>
        <nuxt-link to="/blog/cats">Article on Cats</nuxt-link>
      </li> 
      <li>
        <nuxt-link to="/blog/dogs">Article on Dogs</nuxt-link>
      </li> 
      <li>
        <nuxt-link to="/blog/parrots">Article on Parrots</nuxt-link>
      </li> 
    </ul> 
  </div> 
</template>

Теперь вы готовы создать статический сайт с помощью команды npm run generate. Результатом этой команды будет dist папка, в которой вы должны увидеть index.html для своей целевой страницы и все три «сообщения блога», на которые мы ссылались с целевой страницы.

Вот и все в этой части серии! В следующей части мы обсудим, как вы можете использовать комбинацию Markdown, Frontmatter и загрузчика контекста для импорта статей и создания списка статей.

Теперь доступна вторая часть: Ознакомьтесь с разделом« Создание блога, оптимизированного для SEO: использование Markdown и Front Matter ».

Первоначально опубликовано на https://jessie.codes 18 сентября 2020 г.