I built a node.js social networking web site for noders but I get some serious problems to improve my SEO factors. How can I make it SEO friendly? And yes, given that it is a single page app, it is a little harder!
There are two ways to make sure a single page application is SEO friendly: dynamic rendering and server-side rendering.
Dynamic rendering is the easiest way. In this case, requests coming from bots are forwarded via a service that can execute JavaScript and render your SPA into a plain HTML page readable by any search engine bot. This can be done using a headless browser. An example of such a service is Rendertron that uses headless Chrome. These days it's probably the best option, and you can easily install it on your server along with your web server (Apache, Nginx, or whatever you use).
Server-side rendering (SSR) may appear to be a bit more complicated. In this case, the pre-rendered SPA is also a plain HTML for search engines, but on the other hand, it's a fully functional application that can continue running once it's loaded into a browser. SSR probably brings no advantages for SEO compared to dynamic rendering. Still, a pre-rendered SPA may load faster for users, especially on a slow mobile device, because the device will not have to execute all JavaScript before the user sees the first page.
Here is an article with a bit more details https://trackabi.com/blog/single-page-application-seo
I've toyed around with this before. A good place to start is…
http://backbonetutorials.com/seo-for-single-page-apps/
There are also services and libraries for node that will render your app server side in phantom (or the like) and serve it to the bots.
Related
To the point, I'm working a React app that has "levels" where users have to completely some tasks before then can move on to the next one. And for obvious reasons I can't use client-side js to verify and advance the user to the next level.
I believe that a server should handle this, but I'm stuck on how to go implementing this. I've tried Googling for this but I'm not sure if I can accurately put this into keywords. Some of my current thoughts:
Render React components of each levels to static html then serve this page when the correct request is made to the server (https://reactjs.org/docs/react-dom-server.html). As my whole app is running client-side now, I'm worried that this will complex things a lot more.
Keep all the components client-side but only return the link (route) to the page if a request is made to the server. This way someone extremely motivated can still see all the pages without completing the tasks.
I believe there should be an obvious answer to this question but since I'm relatively new to React, I'm not sure what it is.
Thanks.
React is a client-side framework. Meaning it is run and rendered in the browser.
When you talk about "the server" you are needing to implement a backend framework (i.e. RoR or Express), this is something you will have to learn independently. There are many tutorials online that are free.
My project is a single page application using react js. I have heard that Google can crawl javascript pages including react js single page applications, without the need of server side rendering (even though it's generally better for SEO).
However, when I used webmaster tool: fetch and render as google, both what google bots are seeing and what visitors to my page are seeing are blank.
Even though I can add specific urls to google indexing, google only uses the title and description tag that I have put in my static index.html file, it doesn't get the nested react helmet component's title and description. Does anyone have experience in this? Appreciate it much!
To answer your question, ensure that you have polyfilled the necessary es6 features, google crawler's javascript feature can be quite limited, it does not have Array.find for example. You can read more about that here https://github.com/facebookincubator/create-react-app/issues/746#issue-179072109
As for tips for improving SEO, you can use these tips:
You can prerender your pages on build time to static html by using react-snapshot https://www.npmjs.com/package/react-snapshot This works great if your app does not have many dynamic content.
You can use pre rendering service like prerender.io / use static hosting with prerendering feature like netlify or roast.io. As for prerender.io, you can even host it yourself!
Now Airbnb have a tool Hypernova for server side rendering of javascript views. I would like to know if it can be used for enhancing SEO of Ajax based website like the tool Prerender is used for. If not then why?
A quick way to figure out the way how a tool works is to check its dependencies. It doesn't contain phantom or other adapter for headless browser, so it just evaluates client-side scripts in Node.js.
hypernova runs client-side scripts in Node.js and renders them to HTML. In order to make this possible, scripts should be universal and don't depend on browser-specific features. This allows to avoid the overhead that is caused by rendering in headless browser (like Prerender does).
hypernova documentation is focused on using React components because they are naturally universal and most time don't require real DOM when being rendered in Node.js, They are rendered with hypernova-react package, which is a thin wrapper over React's own SSR features.
AngularJS was developed to run in a browser and relies on real DOM. It is guaranteed to work properly only on client side. It's possible (at least in theory) to render AngularJS application in Node.js with DOM emulation (jsdom) or jQuery emulation (cheerio), but hypernova doesn't offer a suitable adapter for that.
I am doing an angularjs app with a nodejs-expressjs server.
I want to do an app that it's similar to a business directory.
I have doubts about if it's possible doing it SEO friendly to the all items at the directory, either by his name or his features (tags). Always having in mind that all pages are created with AngularJS.
If it is possible, how to do that dinamically.
I implemented an example that uses prerender server (this https://github.com/prerender/prerender) and the prerender-node library at the app server.
My example's pages, created by angularjs, does work (are SEO friendly, it appears at google's search)..but the pages are "static", and the directory it's going to add always new bussines to the directory that I want to appear in googles searching.
Besize, I want my app to be multi-language, and also have doubts about how to do all of that be multi-language, and if it is possible.
I hope you can help me.
If you're hosting your own Prerender server, it will serve the page "on the fly" every time Google accesses it, so it will always have the latest, dynamic content from your pages. If you're using a Prerender plugin to cache your pages, you'll need to make sure you recache them... or use our Prerender.io SaaS and we'll take care of all of the recaching for you.
It sounds like you just want Google to crawl your pages more often because of how dynamic your content might be. In order to have Google crawl your pages more often, make sure to quality inbound links from other sites to increase your PageRank.
Here is lots of advice from Google about multi language sites: https://support.google.com/webmasters/answer/182192?hl=en
I am building a website using nodejs and express. How to make divisions in a page dynamic? Is Jade used for that? if not how to do it?what is angularjs used for? Please help i searched a lot on google and i couldn't get a clarity in the usage of them.
Jade creates the html used in the browser on the server-side. The browser executes a request to the web-server, the web-server executes Jade, which will generate the html that will be sent to the browser. This server-side content generation has been very common in the last ~20 years, but it has quite some cons when building rich internet application. Mostly this has to do with performance and client state tracking.
AngularJS is a client-side MVC/MVVM like framework to build so called Single Page Applications (SPA), which allows you to have the complete user interface flow, all content generation and state tracking to be done at the client side. It even allows you to build offline applications. From the developer point of view this feels much more like building a desktop application where the client knows the state of the user interface. From the user point of the view the website will respond much smoother and snappier because the UI is all generated locally.
Note: SPA does not mean that you can only have one page in your website.
It's a technical term where the browser downloads one page (~/index.html), which contains the complete or partial web application. The user technically never leaves this page, but the content (pages) is dynamically swapped in and out from this placeholder page.
To most common way to provide data to a SPA is via RESTful web services. AngularJS comes with builtin support for REST.
Some developers combine server-side content generation techniques with AngularJS, but there's actually no real need for this.
Jade is used as a template engine on both server-side and client-side. Yes, it can update a page dynamically, you just have to compile your jade templates to a javascript functions (using jade -c or something similar).
Yes, you can use angular.js with it, but I see no real need to use two template engines in your project. Suggesting to just stick with jade, unless you know what are you doing.