If I use Jades template engine with NodeJs will the app be crawlable by search engines and Facebook without using the _escaped_fragment_?
If your application outputs HTML, it is no different than if you had written that HTML in a file and simply served the file. The wider Web doesn't generally know or care what you're using to generate your HTML.
(It is possible to infer what tech a page is using by inspecting headers and looking for common idioms that are unique to a particular technology, but these are just clues, not a fundamental difference in what your Web page is.)
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?
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!
I'm retro engineering a couple of web apps to figure out which technologies are behind them so I can know which one I can use or learn to build my own web app
So, going through the app I can see that it's based on NodeJs and ExpressJS and luckily I know both of them.
But what I can't figure out is the template engine, there's a lot of template engines that are really friendly to Express(Jade, EJS, HandleBars, etc...)
So I was wondering if there is a way to know which template engine is used on a web site
Not normally. The whole point of a template engine is to replace special characters with user facing content so that precludes the type of hints one would need to determine the template engine. One would need to see the server side source code to really know.
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 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.