Meta tags are fetched from an API and rendered on the page, but there are some issues with displaying them correctly. #9228

champs1106 · 2023-09-15T11:54:21Z

champs1106
Sep 15, 2023

I set some meta tags on multiple products i fetch meta tags by using the api. It is the api response

`

{"jsonrpc": "2.0", "id": null, "result": [{"title": "Buy Refurbished Compaq 6720s Laptop at Best Prices in Dubai", "meta": "<meta name=\"description\" content=\"Get Compaq 6720s Laptop Refurbished linke new at best prices from R3 Factory in Dubai, UAE. High in performnce laptop with 6 month warranty.\">
<meta name=\"robots\" content=\"index, follow\">
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
<meta name=\"language\" content=\"English\">", "canonical": "https://website.com/HP/Compaq-6720s-Laptop-with-15.4-Inch-Display-Intel-Core-2-Dou-2GB-RAM-160GB-HDD-Silver/96946"}]}

`

meta description are not showing on the frontside

`

data () {
    return {
     meta: [
        {}
      ],

`

computed

`

metaDescription() {
    if (this.meta && this.meta.length > 0) {
      const metaTag = document.createElement('div');
      metaTag.innerHTML = this.meta[0];
      const descriptionMeta = metaTag.querySelector('meta[name="description"]');
      return descriptionMeta ? descriptionMeta.getAttribute('content') : '';
    }
    return '';
  },

`

I fetch the data by using this method

`

getMetaTagData2: function () {
  const inputs = {
    'inputs': {
      'session_id': this.$store.state.token,
      'model': 'z.records',
      'method': 'get_status_data',
      'args': {
        'page': this.search_url
      }
    },
    'modecode': 100
  };
  api
    .request('post', 'update', inputs)
    .then((response) => {
      var data = response.data;
      if (data.errorcode) {
        this.response = data.errormessage;
        throw this.response;
      }
      if (data.result && data.result[0] && typeof data.result[0] === 'object') {
        const metaHtml = this.getMetaTagData(data.result[0].meta) || [];
        this.canonical_link = data.result[0].canonical;
        this.meta = metaHtml;
        this.webpage_title = data.result[0].title || 'Sell My Device';
        this.updateMetaTags(metaHtml);
      } else {
        this.meta = 'Static description goes here.'; // Moved this line up
        throw data.result;
      }
    })
    .catch(() => {
      this.webpage_title = 'Buy';
    });
},

`

It is my public > index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="cache-control" content="no-cache" />
    <meta name="author" content="">
    <meta name="description" :content="meta">

it is my main.js

`

import Vue from 'vue'
import VueMeta from 'vue-meta'
import { BootstrapVue } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import App from './App.vue'
import router from './router'
import store from './store'

import * as VueGoogleMaps from 'vue2-google-maps'

import VueApexCharts from 'vue-apexcharts'
import VueKinesis from 'vue-kinesis'
import {Swiper} from 'vue2-swiper'
import VueHorizontal from 'vue-horizontal';
import Transitions from 'vue2-transitions'
Vue.use(Transitions)
Vue.use(VueHorizontal)
Vue.use(Swiper)
Vue.use(VueKinesis)
Vue.use(BootstrapVue)
Vue.use(VueGoogleMaps, {
  load: {
    key: process.env.VUE_APP_GOOGLE_MAP_API_KEY,
    libraries: 'places'
  }
})
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)
Vue.use(VueMeta);

`

it is my page path where i check the meta description

{
        path: ':brand/:name/:id',
        component: ReuseProduct,
        name: 'ReuseProduct',
        props: true
      }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue

Meta tags are fetched from an API and rendered on the page, but there are some issues with displaying them correctly. #9228

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Vue

Meta tags are fetched from an API and rendered on the page, but there are some issues with displaying them correctly. #9228

Uh oh!

champs1106 Sep 15, 2023

Replies: 0 comments

champs1106
Sep 15, 2023