I'm using Angular 13 for my application which is hosted in S3 Bucket. Thus far, I have my routes set up, and the page title and meta tags changes dynamically based on the activated route using #angular/platform-browser in browser but when i try to share the link in any social media platform there chat-bot is basically fetching the default meta tags and URL link preview is been generated based on those meta tags
I am not able to get dynamic meta tags to show the preview of the link, when shared in chat-bots
I have tried researching on the web and found some library's which didn't work out and i have even tried out SSR(server side rendering) where i am facing an unknow build error.
I have even tried Hosting in EC2 and running server using docker and port mapping it to the domain.
I assume, Any library we use should be able to assign dynamic meta tags content as they run script in backend process where as chat-bot doesn't run java script so thats the reason then are unable to fetch dynamic meta tags
Can anyone please let me know , if there's a way to achieve the dynamic meta tags , without changing the stack from Angular
Related
Hii Can anyone help me to upload the Shopware PWA on the server(Server Side Rendering). I have tried almost all the methods mentioned on the nuxt js official website but I can't upload the PWA on the server. By using yarn generate, it converts the PWA on the static website so when I changed it on the backend it doesn't reflect on the PWA(like category, pages, etc) and also doesn't change the title of the website dynamically. and I have also tried this method https://www.niagahoster.co.id/blog/upload-nuxtjs-di-hosting/ but it also doesn't work for me.
I came across vuexpress, vuepress and vue-server-renderer. To me these are looking somewhere similer which I guess are not. I am not frontend developer so not able to understand exact difference and use of these three modules.
Their official sites are saying
https://github.com/vuexpress/vuexpress
vuexpress: Vue + Express.js = VueXpress / A server side rendering
engine for Express.js. Use .vue files as your express.js templates.
https://vuepress.vuejs.org/
VuePress: Vue-powered Static Site Generator
https://ssr.vuejs.org/
vue-server-renderer: server-rendered Single-Page Applications using
Node.js as the server.
vuepress and vue-server-renderer are official library from Vue.js
So what exactly are differences and use of these three modules?
The idea with Vue (from the perspective of your question) is that you create a single-page application.
vuexpress is a rendering engine you can use in an Express application if you want to use the Vue syntax to implement your Express views, i.e. you implement a dynamic website and use the Vue syntax.
vuepress is about building a single-page application in Vue that also prerenders each page (and some other goodies, such as using markdown) to improve initial page load and facilitate for search engines. It is primarily used for websites with static content, such as documentation.
The point with a Vue application is to run it on the client (in the web browser). With vue-server-renderer you can run it on the server to obtain the HTML code the web browser would render if it would run in the web browser, and send it to the web browser, so the web browser doesn't need to run your Vue application, but receives the HTML it would display instead. Why? To improve initial page load and facilitate for search engines. I imagine vuepress makes use of vue-server-renderer under the hood.
I am new to Bigcommerce, I need to create a page template in my Bigcommerce theme (Cornerstone).
I have followed the documentation but its redirected to 404 page. Please help me in this.
I have also tried with the below link but the Url redirected to 404 page
Creating a custom page template in stencil for bigcommerce
Note : I have installed stencil framework in local environment and trying it
https://developer.bigcommerce.com/stencil-docs/template-files/custom-templates/about-custom-templates
One common cause for 404 errors when working with custom templates locally is that the page the custom template has been mapped to isn't a page that exists in the live store. For example, if you map "custom-product.html":"/my-product/" in your .stencil file, you'll need to have created a product page in your live store with the URL /my-product/. The template needs to map to a live page of the same type: if you're creating a webpage, you'll need to map to a real webpage; if you're creating a category page, you'd map the custom template to one of your existing category URLs. Hope this helps!
I have this reactjs webapp - http://52.26.51.120/
It loads a single page and then you can click links to dynamically load other boards on the same page... such as 52.26.51.120/#/b, 52.26.51.120/#/g
Now the thing is, I want each of these to be an individual page, for the purpose of seo. I want you to be able to google "my-site.com g", and you will see the result 52.26.51.120/#/g. This obviously cant work if you are using reactjs and it is all on one page. Google will only render and cache that main page (can it even render that page? does google execute javascript?)
Even more specifically, id want something like my-site.com/g/1234 to load a thread. There could be a thousand threads every day, so im not sure how to handle that.
Are there any solutions to this? to allow react to possibly serve up static pages as html so that they can be cached on google? I am using expressjs and webpack as my server right now, and all the code is executed in jsx files.
Thanks
You can use Prerender.io service. In a nutshell you will need to connect your server app or web server with prerender service and do little setup (see documentation). After that search engines and crawlers will be served with a static (prerendered) content while users will get classic React.js (or any other single page) app.
There is a hosted service with free tier or open source version
I suspect you could do some smart configuration with nginx and it could convert a url of domain/board to a redirection of domain/#/board when detecting the user-agent as a bot instead of a typical user.
Good morning,
I am installing a APP with IBM MobileFirst Platform and seen in the documentation, by making an APP multi page, you should avoid the attributes href and document.location.href of javascript. I have verified that the system used is that of a single page and upload the content in div with jquery load () function.
Is strictly necessary this requirement or I can continue using href and document.location.href? I say this, because in my APP, the header and footer, change in each html page and I do not want to reload the html page with many divs, shown and hidden.
What you recommend to resolve this issue? How I can connect different html pages in MobileFirst, without using href or document.location.href?
Thank you.
Best Regards,
The reason why it is recommended to load the page contents via ajax is because MobileFirst libraries are loaded in the main html file. Loading other html files would require you to include all the MobileFirst libraries "including cordova" in every single html file of your application. Doing that will decrease the performance of your application since you will have to load all the library files for each page. It may also cause some conflicts with the objects loaded into the DOM since they may be loaded already.