Switch to English?
Yes
Переключитись на українську?
Так
Переключиться на русскую?
Да
Przełączyć się na polską?
Tak
Разместите свой проект бесплатно и начните получать предложения от фрилансеров-исполнителей уже спустя минуты после публикации!

Разобраться с генерацией мета тегов в приложении на Nuxt.js

300 UAH

  • Артур Поляков TechTide
    20 января 2021, 16:56 |

    Nuxt.js


    "dependencies": {

        "@nuxtjs/axios": "^5.12.5",

        "@nuxtjs/robots": "^2.4.2",

        "@nuxtjs/sitemap": "^2.4.0",

        "aos": "^2.3.4",

        "axios": "^0.21.1",

        "core-js": "^3.6.5",

        "jquery": "^3.5.1",

        "marked": "^1.2.7",

        "nuxt": "^2.14.0",

        "nuxt-purgecss": "^1.0.0",

        "vue-friendly-iframe": "^0.19.0",

        "vue-lazyload": "^1.3.3",

        "vue-owl-carousel": "^2.0.3",

        "vue-vimeo-player": "^0.1.1"

      },


    При генерации проекта прри помощи команды npm run generate не генерируются следующие мета теги - title и meta description.


    nuxt.config.js


    export default {

      head: {

        meta: [

          { charset: "utf-8" },

          { name: "viewport", content: "width=device-width, initial-scale=1" },

          { hid: "description", name: "description", content: "" },

          {

            hid: "og:title",

            property: "og:title",

            content: “xxxxx - Rated #1 in Video Ad Service"

          },

          {

            hid: "og:description",

            property: "og:description",

            content:

              “xxx”

          },

          {

            hid: "og:type",

            property: "og:type",

            content: "website"

          },

          {

            hid: "og:image",

            property: "og:image",

            content: "/og-image.png"

          },

          {

            hid: "og:url",

            property: "og:url",

            content: “xxxxx”

          },

          {

            hid: "og:locale",

            property: "og:locale",

            content: "en_GB"

          }

        ],

        link: [

          { rel: "icon", type: "image/x-icon", href: "/favicon.png" },

          {

            rel: "stylesheet",

            href: "/libs/bootstrap/bootstrap-reboot.min.css"

          },

          {

            rel: "stylesheet",

            href: "/libs/bootstrap/bootstrap-grid.min.css"

          },

          // {

          //   rel: "stylesheet",

          //   href: "/libs/owl-carousel/owl.carousel.css"

          // },

          {

            rel: "stylesheet",

            href: "/css/main.css"

          },

          {

            rel: "stylesheet",

            href: "/css/media.css"

          }

        ],

        script: [

          {

            src: "https://code.jquery.com/jquery-1.11.1.min.js"

          },

          {

            src: "/js/common.js"

          },

          {

            src: "/ga.js"

          },

          {

            src: "/pixel.js"

          }

        ]

      },

      target: "static",

      sitemap: {

        hostname: “xxxxxxxxx”,

        path: "/sitemap.xml"

      },


      css: [],


      plugins: [

        { src: "~/plugins/lazy", ssr: false },

        { src: "~/plugins/iframe", ssr: false },

        { src: "~/plugins/aos", ssr: false }

      ],


      components: true,


      buildModules: [],


      modules: ["@nuxtjs/axios", "@nuxtjs/sitemap", "@nuxtjs/robots"],


      build: {}

    };


    На каждой странице есть конструкция head:


    head() {

        return {

          title: ‘xxxxx - Rated #1 in Video Ad Service',

          meta: [

            {

              hid: "description",

              name: "description",

              content:

                “xxxxx”,

            },

          ],

        };

      },


    При генерации в html встраиваются нормально только мета теги связанные с open graph (og:), те которые прописаны в nuxt.config.js. Эксперемента ради, убирал все посторонние библиотеки и пробовал генерировать, на удивление все генерится как нужно.


    Также если в nuxt.config прописать статический title, при генерации он встраивается нормально в разметку html


    При запуске проекта на сервере title и meta description отрабатывает как нужно, то есть, после загрузки скриптов ставятся нужные теги, но к примеру seo боты не дожидаются загрузгки скриптов и не видят этих тегов

Актуальные фриланс-проекты в категории Веб-программирование

Разработка WebGL/Three.js сцены с генерацией и экспортом 3D (snapshot) из анимированного шейдера

Описание объекта:Проект представляет собой дизайнерский стол, выполненный в форме реалистичного, глубокого водоворота (центральная воронка, которая плавно переходит из широкой горизонтальной столешницы в тонкую изящную ножку). Суть задачи:Требуется WebGL / Creative Coding…

Javascript и TypescriptВеб-программирование ∙ 3 часа 6 минут назад ∙ 15 ставок

Сделать сайт на WP, без конструктора

16 000 UAH

Необходимо сделать каталог (скорее всего без корзины), только форма заявки на товар. Без использования элементоров и других. Должна быть главная страница, страница товара, каталог, каталог поставщиков, и возможно еще несколько других. Дизайн и стилистика типа такого…

Веб-программирование ∙ 3 часа 14 минут назад ∙ 59 ставок

Shopify-разработчик для сайта доставки суши (Польша)

Ищем опытного разработчика Shopify для реализации сайта доставки еды (суши) для клиента из г. Катовице, Польша. Что нужно сделать: Настроить сайт на готовом шаблоне Shopify (шаблон согласован) Меню с фотографиями блюд и описаниями Онлайн-оформление заказов Подключение способов…

Веб-программирование ∙ 4 часа 38 минут назад ∙ 29 ставок

Вебфлоу разработчик для заполнения страниц портфолио на сайте

Сайт разработан кастомно на Webflow для строительной компании, нужно быстро заполнить страницы проектов по одному шаблону (заменить картинки и тексты) Для 2 языков Количество - 6 штук Готовы начинать как можно скорее, спасибо!

HTML и CSS версткаВеб-программирование ∙ 20 часов 34 минуты назад ∙ 36 ставок

Администратор-настройщик LearnWorlds

Задача Настроить готовую платформу LearnWorlds под элитный онлайн-курс. Не разрабатывать архитектуру — реализовать уже готовую структуру руками в admin panel. ———————— Что нужно сделать: Брендинг ⦁ Подключить свой домен ⦁ Загрузить логотип, настроить фирменные цвета ⦁…

CMSВеб-программирование ∙ 23 часа 38 минут назад ∙ 9 ставок

Заказчик
Артур Поляков TechTide
Украина Винница  30  0
Проект опубликован
5 лет назад
18 просмотров