Transcription
В чем смысл тратить месяцы на создание вашего сайта NexJS, если после его запуска никто не сможет найти его в Google? Причина этого в том, что разработчики часто пропускают критически важные этапы повышения рейтинга вашего сайта в SEO, потому что либо боятся этого, либо слишком ленивы. Если вы относитесь к одной из этих групп, к концу этого видео вы сможете сделать так, чтобы ваш сайт занял первое место в Google и получил весь этот прекрасный органический рост.
Теперь, если у вас уже есть работающий веб-сайт, чувствуете ли вы, что ваша облачная платформа вас сдерживает? Возможно, вы достигли лимитов по количеству соавторов, столкнулись с неожиданными счетами или потратили время на жонглирование несколькими сервисами, чтобы запустить одно приложение. Это расстраивает и замедляет работу всей вашей команды. Но именно здесь на помощь приходит сегодняшний спонсор, Seala. Это универсальная платформа без искусственных ограничений, с неограниченным количеством соавторов, неограниченным количеством параллельных сборок и без ограничительных уровней. Таким образом, ваша команда может масштабироваться, не беспокоясь о платных стенах. Savala работает на Google Kubernetes Engine в 25 регионах для обеспечения надежности мирового класса. А благодаря сети периферийных серверов Cloudflare, насчитывающей более 260 узлов, ваши статические веб-сайты будут загружаться мгновенно в любой точке мира. Кроме того, она объединяет все необходимое под одной крышей. Таким образом, вы получаете доступ к управляемым базам данных, объектному хранилищу, приложениям с мгновенным предварительным просмотром, продвинутым конвейерам, и все это с ценообразованием на основе использования. Так что вы платите только за то, что действительно используете. И поскольку он поддерживается Kinsta, вы получаете безопасность корпоративного уровня и реальную поддержку разработчиков, когда она вам нужна. Так что, если вы хотите перестать бороться со своей платформой и начать создавать, попробуйте Savala сегодня, и вы действительно получите бесплатный кредит на 50 долларов. Просто нажмите на ссылку в описании, чтобы ознакомиться с ними. Спасибо, Savala, за спонсорство этого видео, и давайте приступим.
Хорошо, все, давайте начнем. Для начала у меня есть этот проект, который я открыл в VS Code, но сам проект на самом деле не имеет значения. Я просто буду использовать его как пример, на котором мы будем тестировать. Итак, ни одна из этих страниц здесь на самом деле не имеет значения. Мы не будем запускать проект. Мы просто будем использовать их для объяснения различных концепций. Итак, представьте, что вы хотите, чтобы ваш веб-сайт занимал более высокие позиции в различных поисковых системах. Как бы вы начали? Ну, первое, что вы сделаете, это убедитесь, что вы всегда используете серверные компоненты вместо клиентских. Так что, если я пройдусь по всем моим страницам здесь, вы увидите, что все они являются серверными компонентами. Чтобы отличить их, если вы новичок в Next.js, клиентский компонент будет иметь вверху `use client`, и это превратит всю страницу в страницу, отрисовываемую на стороне клиента. Но когда там ничего нет, это означает, что это компонент, отрисовываемый на сервере. Теперь, когда вам действительно нужна функциональность на стороне клиента, которая будет, например, кнопка, на которую вы хотите, чтобы было событие при нажатии пользователем, или, возможно, вы хотите использовать хук из React, такой как `useState` или `useRef`. Тогда вы создаете отдельный компонент. Вы не превращаете всю страницу в него. И в этом компоненте вы сделаете его клиентским компонентом. Итак, у нас здесь есть компонент навигации. И это единственный клиентский компонент, который у нас есть в этом проекте. И почему это клиентский компонент? Ну, это клиентский компонент, потому что этот компонент навигации требует хук. Это хук из `next navigation`, но это все равно хук. И для использования хуков вам нужны возможности отрисовки на стороне клиента. Так что первое главное — это то, что большая часть вашего проекта должна отрисовываться на стороне сервера.
Теперь вы можете спросить себя, почему. Ну, первое — это когда бот поисковой системы, такой как Googlebot или Bingbot, независимо от того, какой веб-сайт вы используете для поиска, когда он посещает ваш URL, он попытается прочитать HTML сразу, чтобы понять структуру контента страницы, ссылки, метаданные, все это. Однако, если ваша страница отрисовывается на стороне клиента, то информации там не будет, потому что компонент, отрисовываемый на стороне клиента, как компонент навигации, который у нас есть здесь, фактически запрашивает JavaScript для загрузки пользовательского интерфейса. Так что изначально здесь не будет HTML-тегов, которые у нас есть здесь, потому что ему нужен JavaScript для их загрузки. И поскольку Googlebot и Bingbot фактически оптимизированы для HTML-контента, который поступает немедленно в ответе, это делает так, что компоненты, отрисовываемые на стороне клиента, такие как этот здесь, хуже для SEO. Так что, когда у нас есть страница, такая как эта здесь, страница контактов, или я перейду к еще лучшей. Мы перейдем на страницу продуктов, вот эту. Прямо на этой странице здесь происходит следующее: это страница, отрисовываемая на сервере. Так что, когда бот входит на эту страницу, когда бот находит этот URL, он увидит полностью отрисованный HTML со всем текстом, со всеми заголовками, метаданными, ссылками, всем этим на месте. Так что автоматически это увеличит рейтинг этой страницы, потому что он будет знать все ключевые слова и текст, которые находятся внутри нее. Но если вы знакомы с тем, как работает React сам по себе, потому что он отрисовывается на стороне клиента, вы знаете, что в клиентских компонентах, таких как навигация, этого не будет, потому что ему приходится ждать загрузки пакета. Так что это первая основная концепция, которую вам нужно понять, чтобы получить SEO в Next.js. Вся причина, по которой Next.js вообще существует, и почему мы создали компоненты, отрисовываемые на сервере, и почему вы избегаете компонентов, отрисовываемых на стороне клиента, заключается в этом. Это потому, что поисковые системы не оптимизированы для отрисовки на стороне клиента из React, потому что на протяжении всей своей жизни веб-сайты всегда строились с учетом сервера, и это просто так. Так что вам нужно убедиться, что вы сохраняете минимальное количество функциональности на стороне клиента и создаете клиентские компоненты только при необходимости.
Теперь вторая вещь, которую вам нужно понять, это как реализовать метаданные на ваших страницах. Ну, что такое метаданные? Ну, метаданные — это просто информация, которую вы предоставляете в разделе заголовка. Так что, если вы зайдете в свой `layout.tsx`, вы знаете, что у нас здесь есть структура HTML. Это гораздо более понятно. Но когда вы добавляете тег `<head>` вот так, а затем вы добавляете информацию в этот тег `<head>`, и эта информация сообщит поисковым системам и платформам социальных сетей, о чем ваша страница. Так что в Next.js вместо того, чтобы добавлять свой `<head>` вот так, потому что этот способ также влияет на макет каждой отдельной страницы, вы хотите добавить конкретные метаданные для каждой отдельной страницы. Способ сделать это очень прост. Вы идете к каждому из ваших маршрутов. Итак, мы пойдем к, я не знаю, маршруту `about`. И затем здесь, что я хочу, чтобы вы сделали, это я хочу, чтобы вы поднялись над своим компонентом. И пока это компонент, отрисовываемый на сервере, вы можете экспортировать константу под названием `metadata`, и она должна быть типа `metadata` вот так. Вы импортируете это из Next, и вы должны сохранить имя, потому что если вы этого не сделаете, то Next.js не узнает, что это метаданные, которые вы пытаетесь вставить, а затем здесь вы можете добавить кучу информации об этой странице. Теперь, какую информацию вы можете поместить в этот объект метаданных? Первый — самый базовый — это просто `title`. Вам нужно определить, каким будет заголовок этой страницы. Например, если эта страница, я не знаю, веб-сайт, где можно посмотреть рецепты. Вы можете поставить здесь «рецепты» или «потрясающие рецепты», я не знаю. А затем название вашей страницы, вашего веб-сайта, я не знаю, recipes.com. Вы можете поставить заголовок, и это то, что появится вверху вашей страницы. Теперь это не только появится вверху вкладки вашего браузера, но и то, что появится в результатах поиска и предварительных просмотрах в социальных сетях. Следующее — критически важно для SEO. Это `description`. Так что в `description` вы можете установить мета-описание. И это то, что также появится, когда вы будете искать этот веб-сайт. Так что вы можете написать что-то очень подробное, например, «найдите лучшие рецепты в мире на этом веб-сайте». Я не знаю. Но вы можете дать хорошее описание здесь, и это действительно повлияет на ваш коэффициент кликабельности.
Теперь следующее также критически важно. Это `keywords`. Вы можете передать список ключевых слов, который поможет краулерам поисковых систем понять, как читать вашу страницу. Так что здесь мы можем поставить «рецепты», мы можем поставить «еда», мы можем поставить, я не знаю, «лучшие рецепты», что угодно, что угодно, что поможет, когда кто-то ищет по этим ключевым словам, это поможет ботам распознать, что эта страница может быть связана с этим. Теперь следующее связано с Open Graph. Теперь, если вы не знакомы с тем, что такое Open Graph, это, по сути, когда вы используете платформу, такую как Facebook, LinkedIn, Slack, любую платформу, и вы ищете URL на этих платформах, этот URL будет отображаться определенным образом. Теперь вы можете захотеть настроить, как этот URL будет отображаться. Так как это сделать? Ну, есть этот веб-сайт под названием opengraph.xyz. И здесь вы можете ввести свой полный URL. Например, у меня есть веб-сайт. Он называется webdev ultra. Это моя платформа курсов. И если бы я нажал здесь на webdevultra.com и нажал «проверить веб-сайт», он покажет, что отображается, когда я пытаюсь поделиться ссылкой на webdevultra на одной из этих платформ. Так что, например, если бы я поделился этим в Twitter или LinkedIn, вот что бы появилось. И я настроил его так, чтобы он выглядел именно так. Он также есть в Discord, на всех платформах социальных сетей. Теперь вы можете захотеть изменить это. Я могу на самом деле захотеть изменить это, потому что я сделал это некоторое время назад. Вы хотите сделать это очень конкретным для того, что вы конкретно хотите видеть, когда делитесь своим веб-сайтом. Теперь, чтобы настроить такие вещи, вы делаете следующее: вы приходите сюда и добавляете поле Open Graph, а внутри него вы можете указать все, что связано с обменом, например, даже заголовок. Вы можете поставить что-то немного более краткое, возможно, «лучшие рецепты в мире». Я не знаю. Описание, то же самое. Я просто скопирую то же описание, но вы можете поставить что-то более конкретное. Затем вы можете даже указать, какой URL. Вы можете указать название сайта, общее название сайта. Так что я могу поставить что-то вроде webdev ultra. На самом деле в этом случае это потрясающие рецепты. Так что я скажу recipes.com. Я не знаю. А затем вы можете поставить изображения. Так что вы заметили, что когда у меня отображался мой webdev ultra, там было изображение. Это потому, что я назначил изображение как своего рода логотип или изображение, которое я хочу показывать, когда кто-то делится моим веб-сайтом. Вы можете редактировать, передавая здесь массив, а не объект, массив объектов, содержащих URL изображения, вот так, с шириной, высотой и всем остальным, что вы хотите добавить, связанное с изображением. Теперь я не буду его добавлять. Я просто показываю вам как пример, и я думаю, что это очень поможет. Теперь, когда вы добавляете Open Graph, я всегда рекомендую вам также указать локаль, то есть место, где вы делитесь этим или создаете это. В этом случае я могу сказать, что это на английском языке, и это, например, в США. И последнее — это тип веб-сайта или тип ссылки, которой вы делитесь. Это может быть просто веб-сайт вот так. Это может быть статья. Есть куча вариантов. Вы можете увидеть все варианты вот так. Вы можете делиться песней, книгой, альбомом, но вы должны быть конкретны, потому что опять же, если вы хотите занять высокие позиции в SEO, вы должны дать ботам все, что у вас есть.
Теперь следующее поле, о котором я хочу поговорить, это поле Twitter. Так что для Twitter это немного по-другому. Очевидно, это применимо и к Twitter, но поскольку Twitter появился раньше большинства других платформ социальных сетей в смысле обмена веб-сайтами, это часть того, как вы структурируете свои метаданные. Вы можете очень, очень четко указать, как вы хотите, чтобы ваша карточка Twitter отображалась, когда кто-то делится вашим веб-сайтом. И вот как это будет выглядеть. Так что вы просто добавляете объект Twitter. Вы можете добавить значение `card`. Вы можете передать заголовок, описание, фактический тег создателя Twitter, который является владельцем этого веб-сайта, и снова любые изображения, связанные с вашим веб-сайтом.
Теперь следующее, что является частью объекта метаданных, это `robots`. Так что вы можете указать в Next.js, как вы хотите, чтобы роботы вели себя и обрабатывали вашу страницу. Так что, когда у меня есть страница, подобная этой, вот тип свойств, которые я бы применил к `robots`. Я пройдусь по каждому из них по отдельности. Так что, когда вы думаете о роботах, первое, что вам нужно, — это чтобы робот мог индексировать вашу страницу. И причина этого в том, что вы хотите, чтобы ваша страница появлялась в результатах поиска. Если это установлено в `false`, то это заблокирует индексацию, и ваша страница не появится в результатах поиска, что противоречит всему, о чем мы говорили. Так что вы хотите установить это в `true`. Это будет контролировать, могут ли поисковые системы включать вашу страницу в свой индекс. Второе — это `follow`. Я рекомендую установить его в `true`, потому что это скажет ботам, следует ли им следовать по ссылкам на этой странице. И вы должны установить это в `false` только в том случае, если по какой-то причине вы хотите скрыть некоторый связанный контент от краулера. Теперь следующее — это `no_cache`. Это предотвратит сохранение поисковыми системами кэшированной версии этой страницы. Так что вы хотите установить это в `true`, если вы хотите, чтобы поисковые системы не кэшировали ее, и вы хотите установить это в `false`, если вы хотите разрешить кэширование. Теперь, почему это важно? Если ваша страница часто меняется или содержит конфиденциальный динамический контент, отключение кэширования гарантирует, что поисковые системы всегда будут предоставлять последнюю версию. Но с другой стороны, если они не кэшируют, будет небольшая задержка в поиске вашей страницы. Если они кэшируют, это мгновенно. Если нет, то есть небольшая задержка. Так что вот в чем дело. Я бы рекомендовал кэширование, если ваша страница не динамична, и не кэширование, если ваша страница часто меняется.
Теперь есть разные типы ботов, для которых вы можете указать информацию. Лучший пример — Googlebot, просто потому, что все используют Google. И с Googlebot есть пара вещей, которые вы можете указать. Все, что мы упоминали ранее, например, указание того, что вы хотите, чтобы Googlebot мог индексировать и следовать, применяется и здесь, но также и некоторые другие вещи, например, когда кто-то ищет ваш веб-сайт в Google или эта страница конкретно найдена в Google, вы можете указать максимальное количество символов, которое Google разрешено отображать в сниппете результатов поиска. Так что это может быть полезно в некоторых ситуациях. Я буду честен, мне это не очень важно. Я всегда устанавливаю это в -1, что означает, что нет никакого ограничения. И это значение по умолчанию и рекомендуемый способ. Если вы установите его в 0, то текст не будет отображаться. Но если вы установите его, например, в 200, то в результатах поиска будет отображаться только 200 символов. Опять же, я рекомендую установить его в -1.
Теперь следующее — `max_image_preview`. Это вместе с этим просто указывает, как вы хотите, чтобы изображения отображались. Честно говоря, я бы рекомендовал установить `large`, если у вас есть пост в блоге или маркетинговая страница. То же самое с видео. Мы установили его в -1, что, по сути, контролирует длину видео. Если у вас есть видео на вашей странице, и вы хотите не показывать все видео или просто показать, я не знаю, предварительный фрагмент видео в результатах поиска, вы можете указать значение и здесь.
Теперь мы почти закончили говорить о самых важных полях, которые входят в объект метаданных. Я бы рекомендовал вам перейти и добавить этот объект метаданных на каждый из ваших маршрутов. Каждый из них. Без исключений. Почему? Потому что это то, что будет отличать ваши страницы от того, будут ли они видны или не видны в Google. Теперь, для вас утомительно делать все это вручную. Так что мой самый большой совет для вас — используйте AI-бота или AI-помощника по коду, такого как Cursor или ChatGPT. Дело в том, что я не рекомендую кодировать все с помощью AI. Я всегда об этом говорил. Однако, что касается метаданных, на мой взгляд, это много повторяющейся работы. Просто возьмите, скопируйте всю свою страницу, вставьте ее в любую используемую вами модель AI и попросите ее сгенерировать хороший объект метаданных. Когда она сгенерирует, вы можете затем внести небольшие изменения, которые вы не хотите или хотите изменить, и тогда это будет работать лучше всего для вас. Так что вперед и добавьте все метаданные ко всем маршрутам.
А теперь давайте поговорим о следующей концепции, которой являются динамические метаданные. Теперь вам легко генерировать метаданные для статических страниц, таких как страница «о нас», где контент в ней на самом деле не меняется, верно? Это просто одно и то же. Так что вы точно знаете, о чем эта страница. Но что, если вы, например, на этой странице здесь? Теперь, если вы не знаете, что это за страница, это отдельная страница продукта. Так что, если бы я запустил этот проект, я просто запущу его, чтобы вы увидели `npm run dev`. Этот веб-сайт чрезвычайно уродлив. Он был полностью сгенерирован AI только для того, чтобы я мог сделать это видео. Но если вы перейдете на страницу продуктов, вы увидите список продуктов. Если я нажму «просмотр деталей», это страница, которая зависит от URL, верно? Она зависит от параметров. Это означает, что как я узнаю, какой продукт находится внутри этого? чтобы создать этот объект метаданных, информация о продукте сильно зависит от того, какое здесь значение, потому что это динамический параметр. Если вы посмотрите на наш код здесь, и я перейду на страницу продуктов, вы увидите, что она зависит от этого значения ID. Так что вы сделаете здесь? Ну, это отличная возможность для вас реализовать то, что известно как динамические метаданные. Так что на этой странице, которая является компонентом, отрисовываемым на сервере, я собираюсь экспортировать асинхронную функцию, а не объект, и назвать ее `generateMetadata`. Она должна называться так, иначе это не сработает. Это функция, которая позволит вам сгенерировать объект метаданных и использовать информацию об URL, такую как параметры, потому что с параметрами мы можем получить ID продукта. Так что вы можете получить к нему доступ напрямую отсюда. Теперь, что это вернет? Ну, это асинхронная функция. Так что она вернет обещание, которое разрешается объектом метаданных. Так что идея здесь в том, что мы все еще хотим сгенерировать объект метаданных, как мы делали на других страницах. Однако здесь, поскольку страница динамична, потому что есть ID, который приходит из параметров и определяет весь пользовательский интерфейс страницы, тогда мы хотим фактически использовать эту функцию для доступа к параметрам и генерации метаданных на основе этого. Так что первое, что мы сделаем, это получим параметры, которые делают это динамичным, верно? Просто получите это и посмотрите на свою страницу, чтобы увидеть, как вы будете с этим взаимодействовать. Так что, во-первых, если продукт не существует, то мы просто возвращаем, по сути, ничего. Мы не возвращаем реальную страницу. Так что метаданные должны отражать это. Как это сделать? Ну, вы делаете проверку здесь. Если продукт не существует, то, возможно, верните следующий пользовательский интерфейс. Вы возвращаете объект, который говорит, что заголовок — «Продукт не найден», а описание — «Запрошенный продукт не найден». Так что мы указываем метаданные этой страницы, даже если продукт не найден. Так что, чтобы добавить метаданные, вы просто возвращаете объект, как вы делали, экспортируя объект метаданных ранее.
Теперь, что, если продукт действителен? Ну, вот отличный способ сделать эту страницу полностью динамичной с ее метаданными. Для заголовка, например, возможно, включите название продукта как часть заголовка. Способ сделать это — вместо того, чтобы просто добавлять что-то общее, например, «страница продуктов», вы можете сделать это. Вы можете поставить название продукта, вставив его. Так что `product.name`. А затем, я не знаю, возможно, бренд продукта. `product.brand`. А затем просто укажите название вашего веб-сайта, например, я думаю, мы назвали его metadata website, я даже не помню, мы на самом деле используем рецепты в качестве примера, но здесь мы сделаем это, так что мы просто включили название и бренд продукта как часть заголовка. Для описания хороший пример — сделать что-то вроде этого. Это немного сложнее, но мы включили описание продукта, цену, находится ли продукт на складе или нет, или даже рейтинг продукта как часть описания. Многие веб-сайты делают именно это. Если вы зайдете и найдете магазин в Google и найдете продукт, если вы найдете ссылку на веб-сайт для этого продукта в Google, вы увидите всю эту информацию. И вы можете подумать: «О, это все делает Google». Нет, на самом деле это тот, кто создал веб-сайт, указывая, как он хочет, чтобы метаданные отображались. Теперь я бы рекомендовал добавить гораздо больше вещей, например, вы могли бы добавить ключевые слова и использовать информацию о продукте для ключевых слов. Вы могли бы добавить все, что мы добавили в другой объект метаданных, но я не хочу повторяться. Так что это идея динамических метаданных. Это очень полезно в ситуациях, подобных этой, когда продукт имеет параметр и зависит от него. И в этом примере у нас также есть пост в блоге. Это также было бы отличным примером страницы, которая выиграла бы от наличия динамических метаданных.
Теперь следующая концепция, о которой я хочу поговорить, связана с роботами. И мы немного говорили о роботах до сих пор, когда мы реализовали эту часть конфигурации в наших объектах метаданных, но есть гораздо больше, что вы можете сделать. Так что есть файл, который вы можете добавить в свой проект под названием `robots.txt`. `robots.txt` — это файл, который будет сообщать веб-краулерам, таким как Googlebot, какие страницы они могут и не могут сканировать на вашем веб-сайте. И это чрезвычайно важно для контроля SEO. Теперь, обычно на обычных веб-сайтах без Next.js вы бы создали текстовый файл. Но поскольку мы используем Next.js, Next.js поддерживает генерацию этого файла для вас. Все, что вам нужно сделать вместо этого, — это создать файл `robots.ts` в корне вашего проекта. Так что в `app`. Теперь, почему это вообще важно? Ну, первое — это SEO-контроль. Направляйте поисковые системы на важные страницы, когда вы хотите. Вы сможете предотвратить трату времени веб-краулеров на нерелевантные страницы, которые вы не хотите, чтобы они находили на вашем веб-сайте. Возможно, например, страницы с условиями использования или политикой конфиденциальности, они не важны для поиска в Google, верно? Так что вы можете их заблокировать. Кроме того, если у вас есть конкретные страницы, информацию с которых вы не хотите утекать из-за безопасности или чего-либо еще, вы можете заблокировать эти конфиденциальные области. И если у вас нет `robots.ts`, я бы сказал, что ваш веб-сайт пострадает от отсутствия этого гранулированного контроля над тем, как вы взаимодействуете с роботами.
Так что вы делаете в своем `robots.ts`? Ну, первое, что я всегда рекомендую, — это, прежде всего, сделать это просто. Я просто импортирую этот объект маршрута метаданных и экспортирую функцию по умолчанию под названием `robots`. Опять же, она должна называться так, потому что именно так Next.js узнает, как получить ваш JavaScript или TypeScript и сгенерировать текстовый файл. Что это вернет, так это маршрут метаданных `robots`. Внутри этого мы просто вернем объект, содержащий различные правила для роботов. Так что, первое, что вы можете сделать здесь? Ну, вы можете фактически указать, что вы хотите сделать в зависимости от того, с каким типом робота вы имеете дело. Здесь есть поле `user-agents`. Если вы хотите внести изменения для каждого робота, вы просто помещаете поле `all` туда. Затем вы можете передать маршруты, с которыми вы хотите разрешить роботу взаимодействовать. Например, домашняя страница. И вы можете передать список страниц, которые вы хотите, чтобы робот запретил. Так что, по сути, если по какой-то причине, если мы посмотрим сюда, мы не хотим, чтобы бот смотрел на страницу контактов. Я не знаю, по какой причине вы бы поставили здесь страницу контактов с косой чертой в конце, потому что тогда она будет включать все после страницы контактов. Теперь, если у вас также может быть API-маршрут в вашем проекте. Если у вас есть, обязательно включите туда API-маршрут. Теперь вы можете углубиться. Вы также можете передать список разрешенных вместо того, чтобы просто передавать пустую косую черту здесь. Вы можете увеличить количество строк или маршрутов, которые вы хотите запретить. Но также вы можете сделать следующее: вместо того, чтобы передавать здесь просто объект, вы можете превратить это в массив. И этот массив позволяет вам давать правила для разных агентов пользователей. Например, для Googlebot вы хотите запретить маршрут, который вы здесь не указали, и он специфичен для Googlebot. Я не знаю, вы можете поставить здесь маршруты условий использования. И теперь я бы рекомендовал, если вы хотите быть очень, очень подробным в отношении таких вещей, поискать всех различных ботов поисковых систем и посмотреть, с какими из них вы хотите взаимодействовать с вашим веб-сайтом, потому что, если подумать, эти боты действительно делают запросы к вашему веб-сайту. Так что иногда, если у вас много ботов, некоторые из них могут быть очень агрессивными в сканировании вашей информации. Так что они могут повлиять на ваш веб-сайт. Есть, например, бот под названием MJ12bot, который, я думаю, довольно агрессивен, когда он ищет и сканирует вашу информацию. Так что вы можете, например, запретить этому боту доступ к определенным страницам, которые повлияют на вашу производительность. Так что вы можете указать эту информацию здесь.
Теперь следующая концепция, о которой я хочу поговорить, на самом деле связана с тем, что мы делаем здесь, а именно с картой сайта вашего веб-сайта. Теперь, что такое карта сайта? Ну, карта сайта — это файл, который сообщает поисковым системам о страницах на вашем веб-сайте, помогая им обнаруживать, сканировать и индексировать ваш контент легче. Так что, когда вы создаете свою карту сайта, вы можете указать, как поисковые системы найдут все ваши страницы, приоритет каждой страницы, как часто они меняются, когда они были изменены в последний раз, и благодаря всему этому ваш SEO улучшится.
Теперь, чтобы создать карту сайта, вам нужно создать файл, похожий на этот `robots.ts`. Вы приходите сюда, и на самом деле я просто скопирую и вставлю это, потому что это будет очень похоже. Мы создадим `sitemap.ts`, который сгенерирует карту сайта для нашего файла, потому что на самом деле файл карты сайта — это не файл TS. Это XML-файл. Но используя Next.js, мы можем просто сделать это так. Мы создадим карту сайта, и здесь мы можем получить карту сайта как тип возвращаемого значения. Теперь, как выглядит карта сайта? Ну, она выглядит так. Вы можете передать список в этом возвращаемом значении, и в этом списке вам нужно передать URL. Теперь на самом деле поставьте реальный URL вашего веб-сайта сюда. Так что в моем случае, например, с моим веб-сайтом я бы поставил webdev ultra, и дело в том, что или webdevultra.com, я бы рекомендовал получить это как базовый URL и извлечь его, потому что вы будете менять по мере прохождения этого списка. Теперь, что я имею в виду под этим? Ну, первое — это просто ваш базовый маршрут. Так что это ваши основные страницы. Если я зайду на свой веб-сайт здесь, это будет то, что здесь. И вы можете захотеть ранжировать это по-другому. Но что вы сделаете, так это для каждого маршрута вы поставите поле `last_modified`, которое, например, я сейчас его изменяю, так что я скажу «сегодня». Затем второе — это вы передадите `change_frequency`. Как часто эта страница конкретно меняется? Может быть, постоянно. Может быть, ежедневно, может быть, всегда, может быть, ежечасно, я не знаю. Я поставлю еженедельно просто как пример. Теперь, что еще мы можем поставить? Мы можем поставить `priority`. Чаще всего главная страница очень важна для веб-сайта. Так что, возможно, приоритет — номер один. Так что мы сделаем это номером один. Теперь давайте добавим еще одну страницу. Давайте перейдем на страницу «о нас», потому что у нас есть базовый URL. Страница «о нас» — это просто базовый URL плюс мы можем добавить значение здесь `/about` в конце. Мы можем передать `last_modified` так же. Мы можем изменить это на, возможно, ежемесячно, а приоритет — на что-то ниже единицы, например, 0.8. То, что вы увидите на реальном веб-сайте, будет примерно таким: каждый отдельный URL будет указан со своим приоритетом и частотой, и это поможет краулерам поисковых систем легче находить наш веб-сайт.
Теперь вы также можете создавать динамические карты сайта. Однако я не буду вдаваться в подробности. Динамические карты сайта — это, по сути, та же концепция, что и то, что мы узнали из динамических метаданных здесь, но с картами сайта. Если у вас есть такие страницы, вы можете указать приоритет различных элементов в зависимости от какой-либо программы. Теперь, поскольку мы создали эту карту сайта, мы должны указать ботам, где находится наша карта сайта. Так что в нашем `robots` здесь мы можем фактически добавить поле под названием `sitemap` и просто связать наш веб-сайт, который имеет этот базовый URL. Я просто скопирую это, вставлю сюда, а затем я могу перейти и сказать `sitemap_base_url/sitemap.xml`. Если вы зайдете на любой веб-сайт, вы должны увидеть это. Если бы я зашел на свой собственный веб-сайт, верно, это webdev ultra. Вы можете увидеть, что если я перейду на `sitemap.xml`, эта страница общедоступна для всех, потому что, очевидно, она должна быть общедоступной, чтобы боты могли получить к ней доступ. И вы можете увидеть на большинстве веб-сайтов, что с ним связан `sitemap.xml`. Теперь здесь мы просто устанавливаем URL карты сайта таким. Так что, по сути, это все для карт сайта и роботов. Я понимаю, что на данном этапе вы можете подумать: «Хорошо, кажется, мы просто добавляем одно и то же снова и снова, верно? Мы просто добавляем так много деталей без причины». Но поверьте мне, именно поэтому я рекомендовал вам использовать, возможно, AI-бота, чтобы хотя бы сгенерировать структуру таких вещей. Но вам действительно нужно хорошо знать различные поля и то, что они делают, потому что тогда вы сможете полностью контролировать SEO вашего веб-сайта. И я знаю, что это звучит так, будто я трачу время на это. Ну, причина в том, что вы создали веб-сайт для использования другими людьми. Так что вы действительно должны тратить много времени, пытаясь привлечь реальных игроков, таких как Google, чтобы они ранжировали ваш веб-сайт высоко. И все эти вещи помогут вам в этом.
Итак, теперь пришло время перейти к нашей следующей концепции, которой являются канонические URL. Так что канонический URL — это предпочтительная версия веб-страницы, когда несколько URL указывают на один и тот же или очень похожий контент. Так что он сообщит поисковым системам, какой URL следует считать, скажем так, авторитетной версией страницы, основной версией страницы. И это действительно хорошо, потому что когда у вас есть большой веб-сайт, как этот, может быть некоторый дублирующийся контент. Так что вы будете оштрафованы богами SEO, такими как поисковые системы, если у вас есть дублирующийся контент. Так что вы хотите этого избежать. Кроме того, он объединит сигналы ранжирования с нескольких URL, что в конечном итоге приведет к более высокому ранжированию вашей страницы. Также, аналогично тому, что мы делали все время, мы хотим помочь поисковым системам сосредоточиться и повысить их эффективность. И используя канонические URL, вы получите это.
Теперь, какой сценарий, в котором это может быть проблемой? Итак, представьте, что у нас здесь есть эта страница продуктов, верно? У нас есть каждый отдельный продукт и ID URL, верно? Параметр меняется, верно? В зависимости от того, какой продукт мы находимся. Может быть, если я перейду на этот веб-сайт, я перейду к продуктам и нажму на этот продукт. Это ноутбук Pro, верно? Теперь представьте, что на этом URL я добавил параметры поиска. Если вы не знакомы с параметрами поиска, по сути, представьте, что я мог бы прийти сюда и поставить «черный» или на самом деле нет, я могу поставить что-то вроде `color=black`. Это параметр поиска, который, если бы он был реализован на этом веб-сайте, возможно, этот ноутбук мог бы иметь разные цвета. И поскольку я нахожусь по URL, который говорит `color=black`, страница по умолчанию будет показывать ноутбук этого цвета. Это делается все время на разных веб-сайтах, и у них обычно есть разные фильтры. Точно так же, как у них есть `color=black`, у них может быть `size=15`, я не знаю, что-то вроде этого. Но дело в том, что нет никакой разницы между этим URL и тем, который с цветом. Нет никакой разницы с точки зрения поисковой системы. И мы должны объяснить ботам, что разницы нет. Так что в реальном сценарии вы можете обнаружить, что у вас есть что-то вроде этого. Я просто использую это как место для написания некоторых комментариев. Вы можете увидеть что-то вроде этого. Куча разных URL, которые как бы одинаковы, но немного отличаются. Так что боты будут рассматривать их как разные, если вы не предотвратите это.
Итак, вот что могут сделать канонические URL. Чтобы реализовать простой, я бы рекомендовал перейти ко всем вашим страницам. Например, страница «о нас» и где-то здесь просто добавить поле `alternates` и передать поле `canonical` с точным URL этой страницы. Так что, если эта страница, я думаю, мы использовали пример рецепта для этой. Мы сказали recipe.com. Давайте просто сделаем это. recipes.com/about. Просто сделайте это. Это все, что вам нужно сделать для статической страницы, такой как страница «о нас». Но для динамической страницы, такой как пример, который мы обсуждали, эта здесь в `generateMetadata`, которая является динамической функцией, которая будет генерировать разные метаданные в зависимости от того, какой у вас параметр. Что вы можете сделать, это сделать это. Вы добавляете `alternates`, и здесь вы можете добавить, я оставлю тот же пример с recipes.com, но что вы делаете, это вы вставляете параметры в это, так что вы просто делаете это, вы вставляете параметры ID напрямую в это. Также вам нужно поставить здесь `products`, и теперь у нас будут динамические канонические URL. Также убедитесь, что вы всегда используете абсолютные URL, никогда не что-то вроде этого, всегда ставьте напрямую базовый URL, чтобы это работало лучше.
Теперь следующее, о чем я хочу поговорить, это концепция JSON для связанных данных. Теперь я не хочу вдаваться в подробности, потому что я чувствую, что другие вещи более важны, а это немного более продвинуто, но, по сути, JSON для связанных данных, также известный как JSON-LD. Это, по сути, метод кодирования структурированных данных с использованием JSON в качестве формата. Это поможет поисковым системам понять контент и контекст ваших страниц, что поможет вам во всем, от получения лучших результатов поиска, лучших рейтингов, поисковые системы будут лучше понимать ваши страницы и даже новые вещи, такие как AI-помощники и голосовой поиск.
Обычно вы бы использовали тег `<script>` на обычном веб-сайте и указывали, что это тег `<script>` для объекта JSON связанных данных. Однако мы находимся в Next.js, и Next.js отлично поддерживает это. Так как это сделать? Ну, я пойду сюда, к нашему файлу продуктов, и это будет отличным примером для этого. Вся идея здесь в том, что JSON — это очень используемый формат данных, верно? И когда у нас есть JSON на нашей странице каким-либо образом, эта страница становится более ценной, потому что краулеры веб-сайтов могут очень легко читать JSON. Так что здесь, это наша страница продуктов. Она имеет кучу HTML в зависимости от пользовательского интерфейса, но в ней, очевидно, нет JSON. Так что одна вещь, которую мы можем сделать, это где-то здесь мы можем создать этот объект. Мы назовем его `structured_data` и присвоим ему JSON, который будет включать кучу информации о том, что это за страница. Так что я на самом деле скопирую и вставлю, как я бы создал структуру данных JSON-LD для этой страницы. Она будет выглядеть примерно так. Теперь я рекомендую вам зайти на schema.org и посмотреть, как вы бы структурировали такой тип информации, но идея здесь в том, что вы даете очень конкретный и четкий пример того, что это за страница. Так что, например, что это за страница? Каково название продукта? Каково описание? Бренд, категория, предложения, рейтинг, все это. Вы просто добавляете это сюда. Теперь, одного этого объекта недостаточно. Нам на самом деле нужно вставить этот скрипт, или мы хотим вставить этот объект в наш HTML. Так что я делаю, это поднимаюсь над навигацией, где угодно на вашей странице, на самом деле, вы добавляете тег `<script>`, и вы указываете тип для этого скрипта, называете его `application/ld+json`, что означает «связанные данные JSON», а затем вам придется использовать `dangerouslySetInnerHTML`, потому что, очевидно, мы вставляем в скрипт, и вы добавляете поле HTML с `JSON.stringify` структурированных данных, и это все. Вы делаете это для страниц, которые, по вашему мнению, ценны для наличия этого, и вы получите от этого выгоду. Теперь я бы не рекомендовал делать это на каждой странице. Я думаю, что на странице продуктов, на странице блогов это должно иметь смысл, но на других это кажется совершенно нормальным. Так что я бы добавил это только в том случае, если вы найдете это абсолютно необходимым.
Теперь пришло время поговорить о последней теме. И это на самом деле немного проще, чем другие, по сравнению с другими. И я оставил это напоследок, просто потому, что я хотел поговорить о более подробных, более конкретных. И это больше похоже на то, что вы уже должны знать, если вы начинаете создавать Next.js, даже если вы еще не на том этапе, когда вы беспокоитесь о SEO, а именно, когда вы создаете свои страницы, вы убеждаетесь, что используете HTML-элементы, которые страницы понимают. Так что, какой отличный пример этого? Итак, давайте зайдем сюда, в наши компоненты, в навигацию. Во-первых, вы видите, как мы используем этот компонент `nav` здесь. У него нет, нет никакой разницы в его полезности по сравнению с тем, если бы я просто использовал `div`. Но почему я использовал `nav`? Я использовал `nav`, потому что в HTML `nav` означает навигацию, и это навигационная панель или навигационный компонент. Так что, когда веб-краулер сканирует наш веб-сайт и видит, что есть `nav`, он точно знает, что это навигационная панель. Если бы он увидел `div`, ему пришлось бы сначала понять страницу, чтобы понять, что это навигационная панель. Так что вы хотите использовать такие компоненты. Другой отличный пример — в посте блога. Если я перейду на эту страницу здесь, она должна отображать пост блога. Если я перейду к, я перейду к блогу. Так что вы видите, есть три блога. Если бы я нажал на это, вы увидите, что это пост блога. Хотя он очень уродлив, опять же, мне это не очень важно. Это пост блога. Теперь, если вы зайдете сюда, вы, возможно, заметили, что у меня есть тег `article`, окружающий весь этот пост блога. Теперь, почему у меня это есть? Ну, потому что опять же, это статья, и хотя это ничего не делает со страницей, если бы я удалил это, вы увидите, что это не меняет пользовательский интерфейс страницы. Наличие этого помогает поисковым системам понять, с чем мы имеем дело. То же самое с тем, чтобы сделать заголовок `header` вместо просто `div`, потому что это заголовок. Так что, возможно, хорошая идея добавить тег `header`. Так что я бы убедился, что вы всегда используете такую структуру компонентов, чтобы поисковые системы понимали, как выглядит ваша страница.
Теперь, в дополнение к этому, если вы хотите проверить, насколько хорош ваш веб-сайт, я бы рекомендовал вам перейти на свой веб-сайт, а затем нажать «Inspect», а не «View Page Source», «Inspect», а затем просто открыть свой Google Chrome, перейти к Lighthouse, а затем буквально сделать это, просто нажмите «Analyze page load». Это может занять, я не знаю, минуту, и это даст вам оценку того, как ранжируется ваш веб-сайт. Теперь это на моем локальном хосте, так что я лично не думаю, что это лучший пример. И также у нас здесь нет вызовов к базе данных. Так что это может быть идеальный веб-сайт. Однако, когда я начал создавать свой веб-сайт, мою платформу курсов, WebDev Ultra, и я собирался сделать так, чтобы эта платформа работала для тысяч и тысяч пользователей, я действительно, действительно беспокоился об этом. Так что вы видите результат этого дал нам 99% оценку. Он дал нам 99 за производительность, доступность и лучшие практики, но только 91 за SEO. Так что это то, что вам нужно учитывать, потому что, когда вы нажимаете на SEO, вы увидите, что он даст вам информацию о том, почему это такая оценка, и я намеренно убедился, что сделал эту ошибку, чтобы вы могли увидеть, как легко исправить эти проблемы. Так что вы видите, он дал нам 91% оценку. Но почему? Он говорит, что наш `robots.txt` недействителен. Теперь давайте перейдем к нашему `robots.txt` и я хочу, чтобы вы увидели, есть ли проблема, по крайней мере, проблема, которая была бы очевидна на этой странице анализа загрузки. Ну, проблема в том, что базовый URL установлен как `webdevultra` вместо, например, `localhost:3000`. Теперь, на самом деле, сделайте этот базовый URL переменной окружения. Так что он отличается на локальном хосте и отличается на продакшене. Но если я нажму здесь, вы должны увидеть, что да, это именно ошибка. Если бы я проанализировал это снова, это должно быть исправлено. Но я рекомендую, каждый раз, когда у вас есть веб-сайт, и вы хотите его произвести, переходите на свой веб-сайт и постоянно анализируйте загрузку страницы. Например, здесь я бы постоянно заходил на страницы курсов и просто анализировал загрузку страницы. И при первом запуске это было не лучшее, но затем я продолжал исправлять это, особенно с SEO, пока не получил идеальную оценку. Так что вот что я рекомендую. И это основная идея этого видео. Если вы чувствуете, что многому научились SEO в Next.js в этом видео и хотите узнать гораздо больше, не забудьте проверить мой курс по Next.js для начинающих. Это этот курс. Мы недавно запустились. Мы все еще по цене ранней пташки. Так что, если вы хотите получить его до того, как он станет дороже, не стесняйтесь. Я научу вас всему, начиная с самого начала и до возможности создавать полнофункциональное приложение. Мы создаем клон Twitter, который имеет все важные функции Twitter, и научим вас не только создавать их, но и оптимизировать их для максимально быстрой работы и развертывания приложения. Так что, если вы заинтересованы в изучении Next.js и вы новичок, не стесняйтесь проверить код, ссылка на веб-сайт будет в описании. И снова, мы по цене ранней пташки. Так что, если вы хотите изучить Next.js и у вас возникают трудности, это лучшее время для этого.
Так что большое спасибо за просмотр этого видео. Если оно вам понравилось, поставьте лайк ниже и напишите, что вы хотите увидеть дальше. Подпишитесь, потому что я публикую каждую неделю или раз в две недели, и я был бы вам очень признателен. И увидимся в следующий раз.