Apologies if you find my question inappropriate. I wanted to know if there's a way to add meta tags dynamically in Quasar? I don't want to make it SSR as I want dynamic meta tags for a single route and not the rest of 10 routes.
I tried different modules, vue-head, vue-meta. It changes the title and information in the app itself, but when tested via https://metatags.io/ the meta tags don't show up. Thanks for your help in advance.
Related
I have a dynamic page where I need to make an API request and update the Meta Tags dynamically.
I was able to achieve that by adding API request in App.js and updating the head tag HTML based on the response from API.
When I share the URL on social media, the tags are not showing up as it requires some loading time.
My application has a lot of dynamic pages with many routes. However, only 1 path in routes is important for me from an SEO standpoint.
What should be my approach here to make the Meta tags show up when shared on Social Media?
You can resolve this problem in two ways.
First: You need to turn on SSR Server Side Rendering. In this it will render all html on server side. Second: If you are using vue inside Laravel Blade template then you can handle meta and og tags on Laravel Blade file side. In this way before loading vue your meta and og tags will be loaded from Laravel.
Im building vue spa with vue router and on FAQ page i want to dynamically add meta title, description and permalink for each question (using accordion), so to show up them individually on google serp and on click, page to be auto scrolled on it.
Can you give me some hints how to do it?
A single page application isn't great for search engines. But if you don't want the hassle of moving your current vue project to another framework such as Nuxt.js, id recommend using vue-meta to add the meta tags to each page in your route, and the vue-prerender spa plugin, to build the static html files for search engines to scan the meta data of each page:
vue-meta:
https://www.npmjs.com/package/vue-meta
vue-prerender:
https://github.com/chrisvfritz/prerender-spa-plugin
In Gridsome, I am basically looking for Vue's nested route functionality (or Nuxt's child-view) to achieve something like this /:userId/profile and /:userId/posts for example. And since Gridsome uses Vue Router there should be a way to achieve this I believe
Let me try to explain what I am trying to build with Gridsome:
At mywebsite.com/ I want to show a Grid of images showing thumbnails of my video portfolio. When you then click on a thumbnail I want a modal to pop-up showing the video. The modal is semi transparent showing the portfolio in the background. So far so good.
But for people to be able to share the URL of the respective video, I need the path changing to mywebsite.com/video-1 and so on. When I then close the modal the path should be mywebsite.com/ again. This is something I already achieved within Nuxt with <child-view>.
Is there some similar functionality in Gridsome? I appreciate your help.
From the feedback you got here:
Gridsome doesn't support child routes yet. But you can kind of achieve what you want if you create a new content type called User and add each user as a node. Then generate pages for them with the Pages API. The pages you create can share a layout component.
In the same way, you can also generate pages for each video for having direct URLs to them. And use the $fetch() method to load a video in a pop-up. Or just query the videos in the front-page query instead of using $fetch().
I was hoping someone had any insight on this basic approach. Sample scenario:
I have a dashboard template with menu links a(href "/page") and I want to click the links to render a different section/view on the template. I used block content...but does it need a specific route?
If I understand correctly, you want to update the content of the page on click of the link without the page getting refreshed.
In that case, no you can't do it using block content.
The purpose of block content is to apply inheritance in your templates.
The typical use of block content would be creating a layout and then creating more specific page from the layout. This is what the official documentation says.
The reason why you cannot do it because, jade is server side templating library. This resolves the block content on server. Once rendered in client, the html looses all the information that was specific to jade (which is obvious because its an html afterall).
What you can do here is
Create a /page.jade and make a ajax call to a service. That service should return an already compiled html string. Since you are using jade, you can easily use jade.compile(source, options) to template / generate html.
Jade API documentation here
I have a page containing <div> tags with onclick="" code that calls an ajax request to get json data, and then iterates through the results to form links (<a />) to append to the page. These links do not exist in any other place on my website. How can I make these dynamically generated links crawlable?
My initial thought was to turn the <div> tags into <a> tags with a href="#", but with my limited knowledge of how typical crawlers work, i don't think this would solve my problem since the "#" would be what's recognized by the crawler, and not necessarily the dynamically generated output. This is besides the point that i don't want the scroll positioning to be altered at all, which would also rule out giving the <a> tag an id and having it reference itself.
Do I have any options aside from making a new page containing all of the links i need to be crawled? Thanks.
As a general rule, content that is created or made available through JavaScript cannot be found or indexed by search engines. Google does support crawlable Ajax but using it as the only means of accessing your content is bad for accessibility. Also, other search engines can't get to that content which is also not a good thing. Basically crawable ajax is a bad thing.
You should always make your content available without requiring JavaScript to get it. Then you can improve your site by adding JavaScript to make getting the content faster or easier. This is called Progressive Enhancement and is how good websites are built.