DEV Community: Scott Moses

Ember Js: How Google Bot Can Crawl Your Site

Scott Moses — Wed, 27 Oct 2021 05:20:16 +0000

Ember.js has been around the early days of the frontend boom and it dates back before Vue, React,s and all others. The framework has never been in the limelight of the frontend hype train but it has been supporting teams and companies silently. ember js seo overview

Ember allows teams to execute their product vision by allowing them to build rich UIs of modern web applications that work on any device. First introduced in December of 2011 by Yehuda Katz

EmberJs is an open-source, Javascript Framework also known as the best choice of “ambitious developers”.In comparison, Ember Js provides the ability to write structured and organized code, which according to the official website enables its users to build a “user enriching website”.Moreover Ember fixes the problem of SEO in a simple way. Ituses route as a model, handlebar template as views and controllers manipulate the data in the model

Before the arrival of asynchronous call, the early websites were relying on full-page refresh approach, but asynchronous call provided the websites the ability to send specific parts of the website for each response. In Ember.js, the server sends the user the whole website at once upon the initial request, This led to an increased loading time but in turn significantly improved the performance of the website for each subsequent user action.

Before we move on to the benefits of using Ember, we need to understand the parts that make up Ember.js and how they fit.

Controllers and Ember Router

The controller layer is the layer between the model and the view. Among the controllers there are few notable ones, such as“Ember.ArrayController” and “Ember.ObjectController”.

The Ember Router functions as a mechanism that is tasked to update the application URLs and listen to URL changes. Each route can have multiple sub-routes and these states can be navigated in the application with the help of the router.

Models and Ember Data

The Models layer is responsible for server-side communication aling with model-specific tasks such as data formatting.

The Ember Model uses the ember data to simplify the code dramatically while improving the robustness and performance of the application.

Views and Handlebars.Js

Ember.js has a quite complicated system for managing,creating and rendering hierarchy of views which the view layer is responsible for. This layer hangles all the response to user events, such as clicks, drags, and scrolls along with updating the content of the DOM when the data changes behind the scene.

Handlebars.js is the official template engine that Ember.js uses. It provides the power necessary to let the users build semantic templates seamlessly without any complication.

Ember.Js automatically deduce the configuration itself, thus saving the users time writing the boilerplate code. It automatically decides the name of the route and the controller when a router resource is defined moreover it automatically creates the controller for the resoruce even if it has not been defined specifically.

Nows if we compare Ember.js with frameworks such as AngularJs and BackboneJs, the most notable feature that we can find is that, Ember includes both and excellent router and an optional data layer unlike Angular and Backbone which have very minimal data layer. It’s data module integrates Ruby-on-Rails back end or any other RESTful JSON API.

Design

When it comes to the design, Ember prioritizes performance over any other. Concepts such as “The Run Loop” insures that the updated data only causes a single DOM update even if a particular piece of data is updated multiple times moreover the ability to pre-compile the HandleBars template during the build time or on the server helps Ember to load and run your application faster.

Now as we have a basic understanding of how the components work in Ember.Js, let’s look at the prerequisites the users require before they can use Ember.js to build user friendly websites.
Prerequisites

Ember.js requires one to meet certain requirements before getting started

Latest Node.js TLS version installed
Npm/Yarn v5.2 or higher
Knowledge of JS framework

Installing Ember.js is as easy as making a cup of coffee in the morning, the following guide will help you set up your Ember.js framework with just a single line of code.

Installation
Ember CLI is the command tool that is very usefulfor quickly generating web apps structure, Using it slightly changes the way the app is written though running it is very simple as demonstrated below.
EmberJs can be installed through npm with the command:

$npm install -g ember-cli

To create a structure for the application you can run:

$ ember new project-name

It will create a folder called releases that will have everything that would be needed to start coding, run:

$ ember server

Now you can visit the “http://localhost:4200” and see a basic web page.

And to check whether the installation is completed successfully or not, check it with the following command-

$ember -v

As every coin has its two sides, Ember Js also comes with both its advantages and disadvantages.

Pros:

EmberJs has well-developed and versatile add-ons making sure that you find what you need.
The Command-Line Interface allows to interact with the computer’s operation system
High Performance and faster rendering allows the application to load faster and provide enhanced user experience

Cons:

Heaviest and most opinionated framework as developers prefer to use more popular frameworks.
It has a steep learning curve, which makes it hard for new developers to use the framework
Lacks the functionality of component reuse

Ember has been an enable of great productivity for almost a decade and will continue in doing so, It has improved a lot over time and has survived the coming of very much pouplar frameworks, which shows the potential the framework has to offer it’s users. It was created to build fully fledge enterprise-level applications which makes it a bit less flexible in comparison to lightweight and responsive frameworks and when compared with popular frameworks such as React.js it is quite surprising that it is not far behind in terms of functionalities so if you are looking for something new and conventional which has the potential to turn into a permanent solution. EmberJs can be your go-to framework.

code block

inside the div

Spa SEO: How To Optimize Single Page Application Apps

Scott Moses — Sun, 17 Oct 2021 12:25:50 +0000

Building a Single Page application is different as compared to that of a static website, this difference in how the page is created affects the visibility of the site as now the social media agents and the search engine has to deal with JavaScript instead of HTML.

Having a SPA by default does not imply that it will be bad for SEO, in fact, if done right, they tend to top the rankings in Google. Since Googlebot is the only crawler that is able to render JavaScript and index dynamic content, one should know a few points before starting to customize their page to have a higher ranking on the google page.

Each app view must have a clean URL
The success of an app’s SEO depends a lot on JavaScript rendering speed and stability
Search engines and social media bots should get metadata in static HTML

Let’s dive into these facts and see how they affect your site’s ranking.

URLs and internal linkings should be SEO friendly

The most common problem that arises while using SPA is that they rely on routers to generate their UI and content in sync with the variable URLs, and the most common pitfalls of SPA URLs is that they either use hash-based routing or History API routing, which a lot many times gives birth to 404 errors when the user tries to directly access a non-existent URL or the crawlers ignore the hashed URLs as they indicate the parts of the same page.

Having a Unique URL is enough for indexing, but to stand apart from the competition, you’ll have to provide these URLs with unique titles, preview images, and descriptions moreover to ensure that other agents pick up these links you will need to put these into static HTML

Tip: Make sure to create an XML sitemap for the project, which makes it easier for search engines such as Google, Bing, and others to crawl your website better,

Fast and Flawless JavaScript Code

One of the most important aspects of SEO ranking is dependent upon how fast the JavaScript Code runs on the site, and for SPAs, it is important to keep an eye on how GoogleBot processes the client-side rendering of the page.
As per the official documentation, GoogleBot has a three-stage workflow for processing JS, which includes crawling, rendering, and indexing in the same order.

Because of the extra stage needed for rendering, it takes a significant amount of time for SPA to appear in search in comparison to static HTML, which increases the risk of an indexing error. To counter this, you need to make sure that your JavaScript code is fast enough to fit into GoogleBot’s render budget.

Tip: Use small JS code for fast initial page load, as it concerns both server and client-side rendering, and this approach of lazy loading solves the problem of slow web apps efficiently.

Unique META tags

The header of the SPA belongs to the static HTML part, which does not change whenever the page is loaded, however, it is necessary to have titles and descriptions that clarify the users and the bots to the information, that they’ll find on each of the page’s URL.
To ensure this, there are special utilities that are available in frontend frameworks that help in generating dynamic metadata and push it into the page header, though the problem that arises here is that there will still be some JS code that executes before the metadata is crawled and indexed which will hide it from search engines that don’t process the JS code. To counter this, make sure to send the metadata with the HTML when the page loads.

If done right, having a SPA is more advantageous in comparison to static HTML pages, as these are built using modern web frameworks that evolve fast, also these technologies provide the design and the interactivity which satisfies both the user’s and the search engine’s requirements.

I made a post

Scott Moses — Mon, 11 Oct 2021 17:47:49 +0000

I made a post! Crea a link

Link