Создайте компонент тегов SEO Head на веб-сайте Nuxt.js для поддержки метатегов HTML и схем JSON.

Nuxt.js поддерживает настраиваемые теги HTML Head, в том числе title, description, изображение, ссылки, каноническиеи другие мета-теги заголовка.

Для поддержки оптимизированных для SEO тегов Head мы можем просто поместить все необходимые элементы в компонент и импортировать его в качестве компонента SEO Head по умолчанию для использования на любых страницах Nuxt.js. head() вернет все теги HTML Head, определенные в возвращаемых объектах.

Поскольку некоторые другие теги HTML Head необходимы для поддержки SEO, и большинство из них имеют сходство с контентом, таким как теги Open Graph или Twitter, мы можем поместить их в один компонент, который поддерживает их все.

Теперь мы можем увидеть сходство в метатегах, которые мы можем поместить в один выделенный компонент в Nuxt.js и назвать его ./components/SeoHead.vue.

После этого мы можем разместить все необходимые метатеги SEO и схемы JSON для поддержки требований SEO.

Конечно, эти теги HTML Head можно настроить в зависимости от вашего Nuxt.js, независимо от того, нужна ли каждая или одна из схем JSON для требований проекта.

После этого теперь мы можем импортировать компонент SeoHead.vue в наш макет и страницы.

А вот пример того, как разместить SeoHead.vue на страницах Nuxt.js:

Это пример того, как мы можем использовать только один компонент для обработки всех тегов SEO Head на страницах базы проекта Nuxt.js, и дать вам идеи о том, как вы собираетесь реализовать их в своем проекте Nuxt.js.

Компонент SeoHead.vue на ./layout/default.vue будет тегами SEO по умолчанию, если на страницах Nuxt.js нет компонента SeoHead.vue.

Вот исходный код из приведенного выше примера, а вот демо по тегам SEO и схемы JSON на веб-сайте Nuxt.js. А о процессе вы можете прочитать здесь в другой моей статье о Chart.js в Nuxt.js: как реализовать.

Демо:



Шаблон панели администратора Nuxtify
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, nisi inventorye, aperiam sapiente quod dolores…nuxtjs-vuetify-dashboard.netlify.app



Читайте также



Как создать приложение VueJS Geo Location Weather
Открытые общедоступные API, такие как OpenWeatherMap API, Google Maps Embed API, Random Quotes API и Hacker News API, очень…javascript.plainenglish.io





Как изменить версию Node.js между проектами с помощью NVM
Управлять несколькими проектами с разными версиями Node на вашем компьютереbetterprogramming.pub





Проект панели администратора Next.js и Reactstrap
React, SSR (рендеринг на стороне сервера) и статический экспорт — это лишь некоторые из многих преимуществ фреймворка Next.JS… код-road.medium.com





Chart.js в Nuxt.js: как реализовать
Chart.js — это удобная библиотека диаграмм с простыми диаграммами HTML5 с использованием тега ‹canvas›. Реализация этого в Nuxt.js или…code-road.medium.com



Закрытие

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

Пожалуйста, следуйте за мной, чтобы получить больше советов и рекомендаций по веб-разработке, спасибо!



Присоединяйтесь к Medium по моей реферальной ссылке — Code Road
Прочитайте все статьи Code Road (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Code…code-road.medium.com