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!
Related
I've made an app where almost all the content is dynamically loaded. It displays users posts, categories, search results, etc.
The problem is that the content doesn't get indexed. I assumed search engines had a way of indexing this since a lot of website load content this way. I used the tools in google search console to find out it only renders the template but it doesn't account for anything dynamically loaded.
Is there any way to fix a flaw like this without a complete SSR rewrite? Or if there isn't can I get a suggestion of good SSR tools for javascript?
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.
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.
I'm currently learning Node.js and AngularJS. To learn how to develop with these technologies, I've been playing with the Phone Catalog sample app found here.
The thing I can't figure out is, how to include a server-generated page in my views. Everything I see with Angular seems to be related to static .html. However, I would like a dynamic page that includes some code that's generated on the server. In other words, I would like to add something like
/app/partials/dynamicPhone
Is this even possible? For the life of me, I can't figure out how to add a server-side page as a partial.
Thank you
AngularJS don't differentiate between server-generated pages, and static pages. From browser's perspective it's all the same.
Just use your /app/partials/dynamicPhone as you would use a static template - only remember you can't use any query parameters with it (because it's supposed to be "static" ie. not changing)