I need to develop a Vue.js SPA where some of its pages need to be referenced by search engines.
I've read about multiple ways to make SPAs SEO-Friendly so I found the following solutions
Server-rendered pages
Prerendering
Since we have a lot of dynamic content to index, generating a static page for each "row" in the database seems not acceptable since we have hundreds if not thousands of content pages.
Creating multiple routes (one for users to visualize and one for bots to crawl)
This solution has been proposed by my manager and it interests me since it's more suitable for our case.
I found this article that illustrates the idea using another SPA framework
My question here is how can I detect that a crawler or an indexation bot have accessed our SPA in order to redirect it to our server rendered web pages and how to actually achieve that in Vue.js 2 (Webpack) ?
If you are concerned about SEO, the solution is to use SSR. Read through https://v2.vuejs.org/v2/guide/ssr.html#The-Complete-SSR-Guide.
If you already have server rendered webpages, as you mentioend in your question, then using SSR would be less work than keeping the Vue SPA and server app in sync. Not to mention, if the Vue SPA and server app show different content, this could hurt SEO and frustrate users.
Any method you use to target web crawlers can be by-passed, so there is no generic solution for this. Instead, try and focus on specific web crawlers, like Google's.
For Google, start by registering your app at https://www.google.com/webmasters. If you need to determine if the Google crawler visited your server, look at the user agent string; there are already other answers for that: Is it possible to find when google bot is crawling any urls on my site and record the last access time to a text file on server, https://support.google.com/webmasters/answer/80553?hl=en.
Related
I dont know is this a right place to ask this question, so i planned to make a blog website with SPA (Single Page Application) model using vuejs, we all know SPA websites are not SEO friendly and we need SSR or Prerendering to overcome this problem.
From some source on the internet i found out that apllying SSR to a Website make it consume more server resource and i need to upgrade my hosting plan if needed and it will affect to my website operating cost.
can you guys give me advice what should i do?
from your experience did ssr cost server resources that much?
should i make my website without javascript framework and using fully dynamic php page?
I'm new using Vue.js. I'm trying to build the frond-end design for a large system for a company. In this system the users have an account where they can access multiple pages to administrate their accounts, interactuate with other accounts, make appoinments, administrate or delete other users, etc. I think that since is a big system, I should use a MPA aproach, because I've read that SPA should not be used for webpages as blogs or online shops because those webpages that are constantly getting updated (as this system will be).
My question is: I can't find a propper guide to configure MPA on vue, is there one guide for this?
I already followed up this stackoverflow anwser by PJ.Wanderson: multiple pages in Vue.js CLI
but is still have doubts.
Should I still be using the vue router? What kind of configuration should I use there?
How can I handle routes with parameters in this case? Should I use SSR too in this case?
Thanks in advance.
If you want to build a MPA in Vuejs, your best bet is building it in Nuxt. Nuxt wil handle all the SSR for you. I'm wondering why even build it in Vue in the first place? The reason there isn't that much information on MPA's with Vuejs is because most people build SPA's with it. Another alternative would be to build a SPA in Vuejs and deploy that on a subdomain. Then have al your marketing and other relevant pages on a simple wordpress site. Hope this helped.
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.
I have an idea to develop iOS App which update user if any feed is updated on wordpress website. Please tell the way/steps how i can achieve the same.
I have tried and searched on google but didn't got solution for my problem. This is one thing i got on youtube about web site reader : http://www.youtube.com/watch?v=Bk0d1npGoq4 But, I doesn't have to developer such app which reads web site content, i would like to show notification as soon as feed on the web is updated.
This is the website ( http://www.webhostingbreak.com/ ) whose reader i want to developer.
Please suggest me some solutions or logic which can help me to complete my task.
You've got several way to access the content of a Wordpress blog.
First and easiest solution is to use the basic RSS feed which is available on any Wordpress, and which is compatible with other kinds of websites.
With Wordpress, more specifically, you can use the XML-RPC API embed by the CMS.
This API need to be enable on the Wordpress website and every request will have to be authenticated with a real user to the Wordpress website (you can implement the registration process in the app or use a generic user in every installed app).
You have several library which handle the XML-RPC calls such as https://github.com/corristo/xmlrpc
I was asked to build a control-system for a Ebay-like Finnish auction-site huuto.net.
The system would reopen closed auctions by a specific rules. It would be completely external from the main site, running at an external website.
The site is however unwilling to release its API and Schema. I know no way to build such a system without knowing its API.
How do you build an internet site without its API and Schema?
You could try some form of automatic browsing: mechanize
Edit:
Examples here.
I think you're asking about building a site that interacts with another site without using a well-defined API. Is that right?
You can interact with an external site without using an official API - in order to do so, you need to imitate a normal site visitor and send your requests to the site frontend (in much the same way as a web crawler does). Tools like hpricot, mechanize and curl can help you parse the content of pages and send requests, but in doing so your system may be quite brittle. Any change to the target site might mean you have to rewrite portions of your system.
It might be possible to get the data you need by screen scraping the site. You could perform the operations you want to do by POSTing data into their forms or using a WebClient type API to make your program act like a web browser but that's likely to be an extremely brittle solution.
Honestly though, without an API, there really is no good solution.
you either need access to the database or an API, otherwise no point in even trying.