Why doesn't the local configuration for meta title and description override the global configuration
The problem is that when I change the meta tags and links on the page, it removes the meta tags that are global and replaces the new meta tags. I want these meta and links to be added to the global meta and links.
In the meta tag and global links that I have, I have a part that makes the logo part of the site correct when adding a bookmark in Safari, but when I add the meta tag to my page, the photo is no longer loaded, and I think the problem is from It is that Next replaces the meta tags that are created on each page instead of the global meta tags
Code
**this is my nuxt config code**
head: {
title: 'Flyver',
htmlAttrs: {
lang: 'en',
},
meta: [
.........
{ charset: 'utf-8' },
{
name: 'viewport',
hid: 'viewport',
content:
'width=device-width,initial-scale=1,shrink-to-fit=no,maximum-scale=5,viewport-fit=cover',
},
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' },
{
hid: 'apple-mobile-web-app-status-bar-style',
name: 'apple-mobile-web-app-status-bar-style',
content: 'black-translucent',
},
.........
],
link: [
.........
{
hid: 'apple-touch-icon',
rel: 'apple-touch-icon',
href: '/android-chrome-180x180.png?v=sf54fgh123',
type: 'image/png',
sizes: '180x180',
},
{
hid: 'apple-touch-icon1',
rel: 'apple-touch-icon',
href: '/apple-touch-icon.png?v=sf54fgh123',
type: 'image/png',
sizes: '120x120',
},
.........
},
this is my index page**
async fetch() {
........
this.headValue = {
title: this.pageData?.value?.title,
link: [
{
rel: 'canonical',
href: `https://flyver.ir`,
},
],
meta: [
{
name: 'description',
content: this.pageData?.value?.description,
},
...this.pageData?.metaTags,
],
};
..........
},
head() {
return this.headValue;
},
What is Expected?
I expect the meta tags that are created per page to be added to the global meta tags
What is actually happening?
Replaces new meta tags with global meta tags
Related
I am not sure if this is possible but here it comes.
I have a nuxt.config.js such as (I have changed some information such as content and href attributes for privacy):
head: {
htmlAttrs: {
lang: 'de-DE'
},
title: 'My Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'My Content.' },
],
link: [
{ rel: 'icon', type: 'image/png', href: '/images/icons/favicon.png' },
{ rel: 'preload', as: 'style', onload: "this.onload=null;this.rel='stylesheet'", href: 'mycss' },
{ rel: 'preload', as: 'style', onload: "this.onload=null;this.rel='stylesheet'", href: 'mycss' },
{ rel: 'dns-prefetch', href: 'https://www.google-analytics.com' }
]
}
As you can see I have two preload link tags which includes onload. I am doing some AMP pages for SEO and AMP gives an error for onload.
The attribute 'onload' may not appear in tag 'link rel=preload
So I want to override those link tags only in my AMP pages. What I have tried is head() function for my AMP pages to override global settings however it didn't override and actually added new links.
export default {
head () {
return {
link: [
// my links
]
}
}
}
I have checked the documentation and looked a few questions here but couldn't find a solution. Is there any way that I can achieve this ?
PS: I want to keep those 2 links in my global because there are lots of pages that uses it.
From nuxt documentation:
To avoid any duplication when used in child components, please give a unique identifier with the hid key to the meta description. This way vue-meta will know that it has to overwrite the default tag.
So try to add an hid attribute to your meta tags to identify them and be able to override them with sub components.
// nuxt.config.js
head: {
link: [
{ hid: 'my-stylesheet', rel: 'preload', as: 'style', href: 'mycss' },
]
}
// page/amp.vue
head: {
link: [
{ hid: 'my-stylesheet', rel: 'preload', as: 'style', href: 'overridedHref' },
]
}
I had as well some issue, with head().
In dev mode I was not seeing any meta data rendered, but when I run nuxtgenereate static (which was my goal anyway) the links were there.
I am not sure, if you wanna go static, but I would try it, to see if it is there or check, what happens if you actually build the app.
I have a static blog site created with Nuxt and hosted on Netlify. For content, I am using markdown files and the new Content module in Nuxt. I used Nuxt and static content, along with vue-meta for SEO purposes, but after a couple months, my coverage report shows multiple errors, and I can't get any pages returned in Google, even when searching on the site name or a specific string of text used on the site.
Here's my setup:
My markdown content is stored in /content/posts
In my blog/index.vue file, this is what I have for my meta tags and data fetching:
<script>
export default {
name: 'Posts',
head() {
return {
title: 'Blog Posts',
meta: [
{
hid: 'description',
name: 'description',
content: 'Example Site blog index'
},
{
hid: 'link',
name: 'link',
content: 'https://example.com/blog'
}
]
}
},
async asyncData({ $content, params }) {
const posts = await $content('posts', params.slug)
.only(['title', 'description', 'publishDate', 'slug'])
.sortBy('publishDate', 'desc')
.fetch()
return {
posts
}
},
};
</script>
In my /blog/_slug/index.vue page, I'm doing almost the same thing.
export default {
name: 'Post',
computed: {
pageConfig() {
return {
identifier: this.post.slug
}
}
},
head() {
return {
title: this.post.title,
meta: [
{
hid: 'description',
name: 'description',
content: this.post.description
},
{
property: "og:site_name",
hid: "og:site_name",
vmid: "og:site_name",
content: "My Site Name"
},
{
property: "og:title",
hid: "og-title",
vmid: "og-title",
content: this.post.title
},
{
property: "og:description",
hid: "og-description",
vmid: "og-description",
content: this.post.description
},
{
property: "og:type",
hid: "og-type",
vmid: "og-type",
content: "article"
},
{
property: "og:url",
hid: "og-url",
vmid: "og-url",
content: 'https://example.com/blog/' + this.post.slug
},
{
hid: "link",
name: "link",
content: 'https://example.com/blog/' + this.post.slug
},
],
link: [
{
rel: 'canonical',
href: 'https://example.com/blog/' + this.post.slug
}
]
}
},
async asyncData({ $content, params }) {
const post = await $content('posts', params.slug).fetch()
return {
post
}
},
}
I'm using this to generate my sitemap in nuxt.config.js
sitemap: {
path: '/sitemap.xml',
hostname: process.env.BASE_URL,
gzip: true,
routes: async () => {
let routes = []
const { $content } = require('#nuxt/content')
let posts = await $content('posts').fetch()
for (const post of posts) {
routes.push(`blog/${post.slug}`)
}
return routes
},
}
and this generates a sitemap at /sitemap.xml with the following structure
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://example.com/blog/blog-post-1</loc>
</url>
<url>
<loc>https://example.com/blog/blog-post-2</loc>
</url>
<url>
<loc>https://example.com/blog/blog-post-3</loc>
</url>
</urlset>
I submitted my sitemap to Google.
When I look at my Coverage report in Google Search Console, I have two main problems:
A large number of posts listed under Not Found (404) with a URL of https://example.com/blog/blog/my-blog-post (two /blogs in the URL). I've noticed this happens sometimes when I click on a post right after deploying to Netlify. I've looked around the code, and I can't find where I might be adding an extra /blog in the URL.
An equally large number under Alternate page with proper canonical tag. Before I put the canonical tag in my /_slug/index/vue header, I got errors about missing a canonical tag, and now that I put that in, I get this error instead.
What do I need to do to fix these errors and get my content correctly indexed?
This is not a question about best practice within SEO but a question about how to setup config.js and script sections correctly in VUE
I have build my site with Vue/Nuxt and what have earlier been a walk in the park for me with angular, are now causing errors.
My overall problem is that I am not sure if I have build my script section right as my pages are not getting indexed by Google. In my nuxt.config.js file I have build my sitemap, robot.txt and some general meta-tags. For every page I have build dynamic meta tags in their script section.
Google Search Console is giving 3 type of errors.
Some pages are blocked by my robot.txt
Some pages is said to be dublicated rel-canonical
When inspecting my site it cant fint pages without typing in '/' at the end of the URL. This is also seen when using Screaming Frog SEO tool.
My assumption is that I am missing some form of a redirect that makes the crawler index pages ending with '/' as those are getting indexed fine in Search Console?
Nuxt.config.js file (Sections, not all content is showed)
head: {
title: 'NorthArc',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'language', content: 'da_DK' },
{ name: 'robots', content: 'index, follow' },
{ name: 'og:type', content: 'website' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
]
},
sitemap: {
path: '/sitemap.xml',
hostname: 'https://northarc.dk/',
routes: [
{
url: '/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/team/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/groen-planlaegning/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/strategisk-samarbejde/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/blog/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/blog/er-ruteplanlaegning-svaert/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/blog/automatisk-ruteplanlaegning/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/faq/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/contact/',
changefreq: 'monthly',
priority: 1,
},
{
url: '/policies/',
changefreq: 'monthly',
priority: 1,
}
]
},
robots: {
UserAgent: 'Googlebot',
Disallow: ['/roi', '/pricing'],
Sitemap: 'https://northarc.dk/sitemap.xml',
},
Script section from a page that is said to be blocked bt robot.txt and has dublicated rel-canonical.
<script>
export default {
name: 'home',
head() {
return {
title: 'test',
meta: [
{
hid: 'description',
name: 'description',
content: 'test',
},
{ hid: 'robots', name: 'robots', content: 'index, follow' },
{hid: 'og-title', property: 'og:title', content: 'Fjern spildtid på vejen og minimere antal kørte kilometer'},
{hid: 'og-url', property: 'og:url', content: 'https://northarc.dk/groen-planlaegning'},
{hid: 'og-description', property: 'og:description', content: 'test'},
{hid: 'og-image', property: 'og:image', content: '/Applications/Northarc_landing/assets/Preview_sløret.jpg'},
],
link: [
{
rel: 'canonical',
href: 'https://northarc.dk/groen-planlaegning/'
}
]
}
}
};
</script>
Notes: (change-log)
I have tried to add a '/' to all sites URL in my sitemap and at the rel-canonical for the pages example showed above.
I have tried to change the user of robot.txt to googlebot to disallow two pages. Before the user was set to '*' where it still blocked some pages.
By default Nuxt allows each route without or with a trailing slash, example:
https://northarc.dk/blog
https://northarc.dk/blog/
It can be detect as duplicate content by crawlers.
So you can define which is the main URL with the "canonical" header.
But if you want keep URLs only with a trailing slash at end, you have to allow only route with a trailing slash by the router configuration:
// nuxt.config.js
router: {
trailingSlash: true
}
See docs https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#trailingslash
in addition,
you don't need to hardcoded all your routes in the sitemap-module config, it's automatic for all static routes, eg.:
// nuxt.config.js
sitemap: {
hostname: 'https://northarc.dk',
defaults: {
changefreq: 'monthly',
priority: 1,
trailingSlash: true
},
exclude: ['roi', 'pricing'],
trailingSlash: true // if necessary
},
I have a Manifest with stuff like name etc. which also instantly brings out meta tags for my page. Now I wanna use Meta Tags on my individual Pages, the problem is that the Manifest Meta Tags dont get overwritten which leads to them having higher priority for sites like Facebook etc.
Example Manifest:
manifest: {
theme_color: '#1a1a1a',
name: 'Stackoverflow',
short_name: 'SO',
description: 'Questions and Answers',
lang: 'de'
},
Example change in the Page:
head () {
return {
meta: [
{ name: 'og:url', content: 'www.notstackoverflow.com' },
{ name: 'og:type', content: 'article' },
{ name: 'og:title', content: this.post.titel },
{ name: 'og:description', content: this.post.subtitel },
]
}
},
The problem is that it still uses the title and description from the manifest instead of the page. It only adds the ones from the page after the manifest ones if I go on View Source.
(Nuxt + PWA Module)
you must add the hid property for each meta:
head () {
return {
meta: [
{ hid: 'og:url', name: 'og:url', content: 'www.notstackoverflow.com' },
{ hid: 'og:type', name: 'og:type', content: 'article' },
{ hid: 'og:title', name: 'og:title', content: this.post.titel },
{ hid: 'og:description', name: 'og:description', content: this.post.subtitel },
]
}
},
see https://nuxtjs.org/faq/duplicated-meta-tags
To avoid any duplication when used in child component, please give a unique identifier with the "hid" key.
I am looking for ways to refactor this:
nuxt.config.js
const headConfig = require('./config/head')
const modulesConfig = require('./config/modules')
const config = {
head: headConfig,
(...)
}
module.exports = Object.assign({}, config, modulesConfig)
config/head.js
module.exports = {
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'fb:app_id', content: 'xxxx'},
{hid: 'og:url', name: 'og:url', content: 'xxxx'},
{hid: 'og:type', name: 'og:type', content: 'website'},
{hid: 'og:image', name: 'og:image', content: 'xxxx'},
{hid: 'og:site_name', name: 'og:site_name', content: 'xxxx'},
{hid: 'keywords', name: 'keywords', content: 'xxxx'}
]
}
An example of what I'd like to be able to do is to automatically set the 'og:url' to the url of the page. There is no need to repeat that every time.
At the moment I include this in each page of my Nuxt.js app:
{
hid: 'og:url',
property: 'og:url',
content: 'https://website.com' + this.$route.fullPath
},
I am sure there is a better way to automatically set that somewhere :/
Probably your best bet would be to create a global Mixin:
https://v2.vuejs.org/v2/guide/mixins.html#Global-Mixin
This should allow you to create a head mixin that will be auto-imported into every component, so you could define that og:url once and have it auto-injected everywhere.
Here's an example of how you'd register it as a plugin with Nuxt:
/plugins/headMixin.js
import Vue from 'vue'
export default ({ route }) => {
Vue.mixin({
head() {
return {
meta: [
{
hid: `og:url`,
property: 'og:url',
content: 'https://www.yoursite.com' + route.fullPath
}
]
}
}
})
}
in nuxt.config.js:
plugins: [
'~/plugins/headMixin.js'
]
this is my way
in nuxt.config.js:
head: {
title: 'default title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'default description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
in default.vue
export default {
head() {
return {
title: `Company - ${this.$route.meta.title}`,
meta: [
{
hid: 'description',
name: 'description',
content: this.$route.meta.description
}
],
}
},
and if you use #nuxtjs/router in router.js
routes: [
{
path: '/page',
name: 'some',
meta: {
title: 'Best seo title',
description: 'Best seo description'
},
component: someComponent,
},
All the data you write in routes. Everything works perfectly.