I want to add Schema Tags and load my custom CSS in head tag on some particular pages not all, So is their any easy way to do that as I am not a coder, Can anyone help me regarding this?
To Add custom style to the default installed vuepress I use the following code in index.styl under .vuepress/styles/ to update content__default css class:
/**
* Custom Styles here.
*
* ref：https://v1.vuepress.vuejs.org/config/#index-styl
*/
.home .hero img
max-width 450px!important
.content__default
background-color #3df085
Screen:
About SEO tags I suggest loris plugin
after reading your comment I see a custom layout is the solution.
Add tags to head via config.js:
head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['meta', { 'property': 'og:type', 'content': 'article' }]
],
Easy customization using default theme:
Custom style for each page using custom page class.
Add tags for each page using yaml header.
Example for #1 & #2:
/blog/README.md
---
pageClass: blog-page
home: true
heroText: Hero Title
actionLink: /blog/
meta:
- name: description
content: blog page by abuabdellah
- name: keywords
content: super duper SEO
---
# Introduction
This is a test for a blog using v1 Vuepress
/guide/README.md
---
pageClass: guide-page
meta:
- name: description
content: guide page by abuabdellah
- name: keywords
content: super duper SEO
---
# Introduction
VuePress is composed of two parts
index.styl
.theme-container.blog-page
background-color blue !important
.theme-container.guide-page
background-color green !important
Related
I have a site implemented with Nuxt.js and want to share the pages on Facebook, Twitter and WhatsApp. I have to use the metatags opengraph, so I've included them. When I try to share a page into a social network, I can't see the content of the metatags. I can't see the image either, the title and description.
In my case the metatags opengraph are well suited and filled in the page. I've read how to do it in several resources, so that's not the problem. They are located in the <head> tag.
But the problem is when you use the Facebook debugger tool to see your page preview, or the https://metatags.io/ tool. When I wrote the url of my page, a 404 is returned for these tools. For the same url in a browser, you can see properly the page how it is. If you inspect the page, you can see the meta tags.
I think the problem is Twitter or Facebook are doing a GET call to my url, but the result of this call, in my understanding, is a Nuxt.js pre-render page for being executed in the browser. In the browser the JS sources are executed at the moment of the page loading, so it can inject all the metatags and many other things. I think this is how Nuxt.js SSR is working. hydratation process?
So my point is how to send the complete HTML when a GET is done, or a workaround to show my preview page in Facebook or Twitter.
Btw, I have deployed my site in Netlify, I don't know if it matters.
My nuxtjs app is working on universal mode.
Any idea to resolve the problem with the crawlers and robots?
any prerender option?
I was researching and finally I've realized what was my real problem.
The main problem is I'm deploying the Nuxt app into netlify. This platform only allows you to deploy the Nuxt app as static resources (Static Generated Deployment, Pre-rendered). I mean, there are three ways to deploy a Nuxt app: universal, spa and universal as static mode (Static Generated Deployment, Pre-rendered). The third case is a special case, in which you have to create all the static resources as html pages in deploy time. For doing that you have to use the "npm run generate" command. In my case, I have some dynamic routes and I have to do some rest queries in order to achieve the data in every case. I don't have all the db rows to generate all the html pages at the build time. It's really expensive for me. So Nuxt at the end, for the case of dynamic routes, it's generating only a html page, but including the js part which is the client to the data. So when Facebook or google is calling to the url, they are getting the html with the js, but nothing of the data, because the js is only executed in the browser, and it's there, when the page gets the data via rest. So Facebook, Twitter of WhatsApp can't get the metadata of something that is missing. Additionally these services are getting a 404 http error code when they are calling to my urls, instead of a 200 http code. So it's impossible to share the url into these social services. The solution: or generate all the html pages for every resource in the build time (case 3) or moving to another provider as firebase in order to deploy as universal app (case 1) with an express server. I think I´ll move it to firebase to achieve a good SEO and social media features.
for the other hand I've changed my head method to accomplish with the open graph metadata:
head() {
return {
title: `${MyStringHandler.truncate(defaultTitle, 65)}`,
description: defaultDescription,
link: [
{
rel: 'canonical',
href: `${routePath}`
}
],
htmlAttrs: {
lang: `${language}`
},
meta: [
{
charset: 'utf-8'
},
{
hid: 'title',
name: 'title',
content: `${MyStringHandler.truncate(defaultTitle, 65)}`
},
{
hid: 'description',
name: 'description',
content: `${MyStringHandler.truncate(overviewDefault, 155)}`
},
{
hid: 'og:type',
property: 'og:type',
content: 'website'
},
{
hid: 'og:title',
property: 'og:title',
content: `${MyStringHandler.truncate(defaultTitle, 35)}`
},
{
hid: 'og:description',
property: 'og:description',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'og:image',
property: 'og:image',
content: URLHelper.get2XURL(path) // the size has to be more 200px at least
},
{
hid: 'og:url',
property: 'og:url',
content: `www.mydomain.com${routePath}`
},
{
hid: 'og:site_name',
property: 'og:site_name',
content: `mydomain.com`
},
{
hid: 'og:locale',
property: 'og:locale',
content: `es`
},
{
hid: 'og:image:type',
property: 'og:image:type',
content: 'image/jpeg'
},
{
hid: 'twitter:card',
property: 'twitter:card',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'twitter:site',
property: 'twitter:site',
content: 'mydomain'
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: `${MyStringHandler.truncate(defaultTitle, 35)}`
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'twitter:creator',
property: 'twitter:creator',
content: 'mydomain'
},
{
hid: 'twitter:image:src',
property: 'twitter:image:src',
content: URLHelper.getImageURL(path)
},
{
hid: 'twitter:domain',
property: 'twitter:domain',
content: 'mydomain.com'
},
{
hid: 'twitter:image',
name: 'twitter:image',
content: URLHelper.getImageURL(path)
},
{
hid: 'twitter:url',
name: 'twitter:url',
content: `www.mydomain.com${routePath}`
}
]
}
}
You can test the metadata into the next pages:
https://metatags.io
https://cards-dev.twitter.com/validator
https://developers.facebook.com/tools/debug/
update:
nuxt can generate your static resources in deploy time using npm run generate, and these resources are SEO-ables. The metatags are working well.
I have my Nuxt app and I'm trying to add Vuepress on it.
I did yarn add vuepress#next -D then created the docs folder and a readme.md file in there.
The problem: The project only shows the sidebar and navbar if the .vuepress folder is outside of the docs folder; If it's inside, it won't work - Not respecting the config.js rules.
Also, it's recognising the readme.md from the Nuxt app (outside from docs folder too), not the one inside docs folder.
Can anyone help me with that?
Another question, if this above works, Am I be able to access through localhost:3000/docs instead of localhost:3000 for the Nuxt project and localhost:8080 for the docs?
That's my current folder structure (no sidebar showing - not respecting the config.js inside the .vuepress folder):
docs
|__.vuepress
| |__config.js
|
|__guides
The config.js file:
module.exports = {
title: 'Documentation',
description: 'Documentation',
themeConfig: {
sidebar: 'auto',
nav: [{
text: 'Home',
link: '/'
},
{
text: 'Guides A',
link: '/guides/apis/'
},
{
text: 'item with subitems',
items: [{
text: 'Subitem 01',
link: '/'
},
{
text: 'SubItem 02',
link: '/'
}
]
},
{
text: 'External',
link: 'https://google.com'
},
]
}
}
Vuepress version 1.0.2
Thanks.
Why you need to use both of these? If you using Nuxt you don't actually need VuePress. Check the official VuePress documentation.
Nuxt
Nuxt is capable of doing what VuePress does, but it is designed for building applications. VuePress is focused on content-centric static sites and provides features tailored for technical documentation out of the box.
I have attached 2 screenshots, one of my vue.config.js and another of a section of the unminified output my build is producing.
Whats happening is this: I want to change the icon paths and the path to the manifest. For whatever reason the official way of changing this is not working. Right now they are blank spaces, however it was not working when it was anything else either ( just tried with 'foo/bar' as the path as I was typing this to triple check ).
I am confused because I seem to be doing everything exactly as I should according to the official docs. Is there anything another set of eyes can spot that I am missing?
Greetings Erik White
At some point I had the same difficulty and solved it as follows:
Copy the images into the "public" folder
example:
We add the folder "favicon" to "public", "favicon" contains 5 images
[project]/public/favicon/favicon-32x32.png
[project]/public/favicon/favicon-16x16.png
[project]/public/favicon/apple-touch-icon-152x152.png
[project]/public/favicon/safari-pinned-tab.svg
[project]/public/favicon/msapplication-icon-144x144.png
To add images in your html: modify the "vue.config.js" and add.
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
iconPaths: {
favicon32: 'favicon/favicon-32x32.png',
favicon16: 'favicon/favicon-16x16.png',
appleTouchIcon: 'favicon/apple-touch-icon-152x152.png',
maskIcon: 'favicon/safari-pinned-tab.svg',
msTileImage: 'favicon/msapplication-icon-144x144.png'
}
// ...
}
}
To change the path and name of "manifest.json" modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestPath: 'my_new_manifest.json',
// ...
}
}
To change the properties of the "manifest.json", (name, images, color, etc) modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestOptions: {
name: 'etc ..',
short_name: 'etc ..',
theme_color: '# f44647',
background_color: '# f44647',
start_url: 'index.html',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: './favicon/favicon-32x32.png',
sizes: '32x32',
type: 'image/png'
},
{
src: './favicon/favicon-16x16.png',
sizes: '16x16',
type: 'image/png'
},
{
src: './favicon/apple-touch-icon-152x152.png',
sizes: '152x152',
type: 'image/png'
},
{
src: './favicon/safari-pinned-tab.svg',
sizes: '942x942',
type: 'image/svg+xml'
},
{
src: './favicon/msapplication-icon-144x144.png',
sizes: '144x144',
type: 'image/png'
},
]
},
// ...
}
}
NOTE
chucks is not a supported parameter.
excludeChucks is not a supported parameter.
If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache.
Remember to see the VUE documentation, it is very detailed, I leave you a link below #vue/cli-plugin-pwa
Nevermind, solved by updating my dependencies.
guessing this was fixed in a patch i didnt catch
I have a vuepress site which lives in my current vuejs app at /docs.
I am building the site into the main /dist folder and deploying them together.
When I am adding a link to the navbar in the .vuepress/config.js file the base is always appended or if adding the full URL it creates an external link.
module.exports = {
base: "/docs/",
dest: "dist/docs",
themeConfig: {
nav: [
{ text: 'Home', link: 'https://myapp.com/'},
{ text: 'Guide', link: '/guide/'}
],
}
}
I can change the way external links are handled, but this is site wide and I do not want this to apply to all links.
In short:
{ text: 'Home', link: '/'} // this is directing to /docs due to base
I would like, for this to direct to myapp.com
I have made a website using NUXT that needs SEO
When I use www.xml-sitemaps.com website to see if it can find all my pages, it only finds the home page, and none of the other routes. When I try other NUXT demo websites it finds them all.
My robots.txt file looks like:
User-agent: *
Disallow: /profile/
Sitemap: https://www.example.com/sitemap.xml
I am using #nuxtjs/sitemap to generate the sitemap.xml that ends up looking something like this:
<?xml version="1.0" encoding="UTF-8"?>
<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://www.example.com/about</loc> </url>
<url> <loc>https://www.example.com/</loc> </url>
</urlset>
And if this helps, my nuxt.config.js looks like:
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Title' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
mode: 'spa',
loading: { color: '#3B8070' },
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},
css: [
'~/assets/main.css'
],
modules: [
'#nuxtjs/pwa',
[
'#nuxtjs/sitemap', {
generate: true,
hostname: 'https://www.example.com',
exclude: [
'/profile'
]
}
]
],
plugins: [
'~/plugins/uikit.js',
'~/plugins/fireauth.js'
],
manifest: {
name: 'Title',
lang: 'en'
},
router: {
middleware: 'router-auth'
},
vendor: [
'firebase',
'uikit'
]
}
I'm the creator of the nuxt sitemap module.
Your sitemap-module configuration is set in the wrong section.
Please, update your nuxt.config.js:
modules: ['#nuxtjs/pwa', '#nuxtjs/sitemap'],
sitemap: {
generate: true,
hostname: 'https://www.example.com',
exclude: [
'/profile'
]
},
plugins: [
Then run npm run generate.
Finally check your generated sitemap.xml in the \dist\ folder.
(If you have an other issue or question, you may open an issue on github project: https://github.com/nuxt-community/sitemap-module/issues)
It's important to understand what's going on with different Nuxt.js modes. Read the explanation about server side rendering in the Nuxt.js Guide, where they explain the difference between the three modes the framework can be configured to work in:
Universal (with server side rendering, so that when any page is rendered, that page will be served with all HTML rendered (SEO and crawler friendly mode)
SPA (Single Page Application) which will serve up the HTML skeleton together with css and javascript bundles, which will only be unbundled to create the initial DOM in the browser. Cool for intranet apps, bad for SEO.
Static generation of all pages (pre-rendering) so that the site can be served up in any shared hosting as simple HTML.
Once the concepts are clear, you can try changing the "mode" property in your Nuxt.js configuration file from "SPA" to "Universal", together with the other suggestion regarding xml sitemap configuration in the same nuxt.config.js file.
Additionally, you can try out and learn about different configurations by either using:
The Nuxt.js starter template discussed in the Installation Guide.
Something like Create Nuxt App that, once installed via npm install -g create-nuxt-app allows you to see how many different configurations are automatically set up for you.
Since you are in SPA mode you will not get much success with SEO, if you can run in universal mode then you will see full benefit of nuxt/vue.
See this website I did with Nuxt in universal mode.