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
Related
I am using spartacus framework for storefront. I want to show tabs in my application and load pages based on selected tab. Is there any existing cms component or configuratio with which we can do or can i extent the cmscategorynavigation component and customize?
The CMSTabParagraphContainer is used on the product details page to display tabs. A CMSTabParagraphContainer can contain SimpleCMSComponents but not for example ContentPages. You would have to extend the CMSTabParagraphContainer on the backend to also accept ContentPages, ProductPages etc. and then extend the frontend components as well. To extend Spartacus components have a look at: https://sap.github.io/spartacus-docs/customizing-cms-components/
To be honest: This seems like a lot of work if you just want a visual change to the navigation
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.
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.
I am building a react blog app, I am using a functional component where I will be using some internal and external links both. For the internal links I am using Link from react-router-domwhich is working fine but for the external link I am not able to decide will an Link from react-router-dom works, which directs to the path of the external URL or an <a> tag should be fine.
The purpose of using react-router-dom is to navigate to application routes by making changes in the DOM and not reloading the whole page. This scenario is applicable to internal links.
When coming towards external links. It is something that is not the part of our application. We cannot render it our application context. So, a solution to that is using an a tag for external links.
Link is basically a wrapper of an tag with a lot of upside functionalities like,
A can know when the route it links to is active and
automatically apply an activeClassName and/or activeStyle when given
either prop.
The will be active if the current route is either the linked
route or any descendant of the linked route.
To have the link be active only on the exact linked route, use
instead or set the onlyActiveOnIndex prop.
Read the rest at https://knowbody.github.io/react-router-docs/api/Link.html
You can use the anchor tag if you plain something plain. use Link for ease of use.
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.