Category Archives: Seo

SUBSCRIBE TO UI STREET

SEARCH ENGINE OPTIMIZATION FOR SINGLE PAGE APPLICATIONS

Search Engine Optimization for Single Page Applications

In case you’re running an AJAX application (SPA) with content that you’d like to show up in search engine result, we have another procedure that, when actualized, can help Google (and conceivably other internet searchers) slither and record your content.

Verifiably, AJAX applications have been troublesome for web search tools to prepare on the grounds that AJAX site content is created dynamically by the program and in this manner not obvious to web crawlers. While there are existing systems for managing this issue, they include standard manual support to stay up with the latest.

Using HTML Snapshot:

With a specific end goal to make your AJAX application crawlable, your site needs to submit to another understanding. This assentation lays on the accompanying:

1. The site receives the AJAX slithering plan.

2. For each URL that has rapidly delivered substance, your server gives a HTML depiction, which is the substance a client (with a program) sees. Frequently, such URLs will be AJAX URLs, that is, URLs containing a hash piece, for instance www.mywebsite.com/index.html#key=value, where#key=value is the hash part. A HTML preview is all the substance that shows up on the page after the JavaScript has been executed.

3. The internet searcher files the HTML depiction and serves your unique AJAX URLs in list items.

With a specific end goal to make this work, the application must utilize a particular structure in the AJAX URLs (pretty URLs). The web crawler will briefly change these “pretty URLs” into “ugly URLs” and solicitation those from your server. (This solicitation of a “ugly URL” demonstrates the server to return the HTML snapshot of the page rather than the normal page. At the point when the web crawler has gotten the content for the altered ugly URL, it lists its contents, then shows the first pretty URL in the search items.

As it were, end clients will only see the pretty URL containing a hash part

Using Fallback Pages:

Fallback pages are HTML pages that show if the requesting resource does not parse JavaScript. They are typically static pages that try to replicate the handiness and content of the JavaScript web application by means of server-side rendered pages. These pages hold the same substance the JavaScript application would show, using standard indexable states for route.

Fallback pages give web crawlers the content they require for critical hunt points of arrival. These pages are not planned for clients unless they are utilizing a restricted or content program. Going above and beyond, this way to deal with the issue is regularly alluded to as “Progressive enhancement” – a full site where clients get as much usefulness as their framework can deal with. This is additionally the best work, obviously, as code should be composed for every level of customer usefulness over the whole site.

Cons: Building fallback pages requires a lot time, cost and incorporates advancing workload. Also, customers may never see the fallback pages or their URLs – they will see the URL with the hash sign – and these URLs won’t gather inbound associations or social signs at the URL level. This may be an issue, dependent upon whether the URLs are imperative regular purposes of landing.

Finally, as it is may not be possible to totally copy JavaScript handiness through static pages, this infers you are subsequently making an alternate, to particular site for key regular presentation pages, which again incorporates workload.

Using a pushState:

Counting pushState is truly immediate and indeed a strong segment of the conspicuous Single Page.

Application frameworks like the openly discharged structure Ember or Google’s Angular framework offers APIs to easily get to the handiness. Regardless, despite for web specialists inclining toward custom Javascript change, the as of late included History API, which is a bit of the HTML5 determination, gives an essential interface to push full URL updates to the project bar on the client side without using the limited open URL parts or driving a page fortify.

In any case, there is downside in using pushState execution. The best SEO executions of pushState are on areas that are starting now open without JavaScript, with the AJAX version fabricated “on top” as depicted already. PushState is then engaged to think seriously about the duplicating and sticking of associations and the different focal points of having URLs that reflect the customer experience. For example, purpose of landing destination URLs, for occasion. Along these lines, subsequently, pushState is not a response for the issue of AJAX areas and SEO autonomous from any other individual, yet it has any kind of effect. Executing pushState incorporates change and bolster workload. The variables and URLs referenced ought to be updated as the site progresses. So, what is the best arrangement?

Precompiling Javascript:

To make a Single Page Application (SPA) accessible to crawlers the best plan starting now is to serve HTML snapshots. A HTML portrayal is a perfect HTML representation of the page that the SPA would render in the system. Following are the approaches to manage and render the reviews on the server:

1. Render the page in a headless project: The server can turn up a headless system like PhantomJS and run the first SPA inside it to render the page that the crawler inquired. At the point when the rendering is done the made HTML page is served to the crawler. On one hand this strategy has the point of interest that the SPA itself needn’t trouble with extra handiness for making HTML sneak peaks. On the other hand, the establishment must be manufactured for that. In addition, that adds progression and testing costs to your endeavor.

2. Utilize a cloud organization: Quite a few cloud organizations grew around the first approach reducing the utilization effort down to one line of code which propels crawler sales to their establishment. If your project spending arrangement grants you to buy their services, this is undeniably the most smooth course of action.

3. Have an isomorphic code base: If JavaScript is used on the server likewise (e.g. node.js) you may decide to develop your application method of reasoning in an isomorphic way. By then the SPA can be executed on the server even without a headless system. Regardless of the way that this setup decision wouldn’t be made if it were just for SEO. If the code base is isomorphic, this strategy is more clear than the first and less costly than the second one.

SUBSCRIBE TO UI STREET

PARALLAX SCROLLING WEBSITES AND SEO

PARALLAX SCROLLING WEBSITES AND SEO

Originally created for the gaming industry, parallax scrolling is basically a scrolling technique in computer graphics, where a background image moves in along with a foreground images, but at a slower rate. This kind of “special effects” technique creates an illusion of depth for a website.

Parallax scrolling is a pretty complicated design technique and you might want to keep the below mentioned points in mind.

  • Start with creating an SEO architecture, eventually moving on to implementation of your design.
  • Parallax Scrolling is really unsuitable for mobile websites or their mobile-friendly versions because it makes websites noticeably heavy. So, if your main site runs parallax scrolling, it is best to remove it from your mobile website since it will in invoke a tedious user-experience.

As a web developer, one should be aware that parallax scrolling can cause multiple SEO issues because it adds a lot of weight to a website, and no search engine wants to deal with a content heavy website, including Google. Again, it is recommended that one ascertain as to whether they really want or need parallax scrolling effects on their website.

This is because people are averse to change, and if you have a website that has been running for a long time and has high-traffic inflow, it’s best to keep track on how the users or visitors are reacting to the changes on the website.

Does Parallax Really Affect SEO?

To put all your doubts to rest, yes. If not implemented properly, parallax scrolling can seriously affect your SEO rankings. It is common knowledge that search engines search for and identify websites that are rich in content and functionality.

Coincidentally, search engines also loathe heavy website, putting web developers in a really tight spot. It is, however, useful to note that a parallax-enabled website is typically just a single or one-page website. You also know that you aren’t allowed to have multiple H1 headers or meta-descriptions for a website that has all of its content crammed into a single page, no matter how convenient it is for you.

Challenges of Parallax Scrolling:

So, let’s see what parallax scrolling actually does for your SEO intentions.

Parallax Design For SEO

1). Loading Time

Parallax-enabled websites have much longer load times than standard websites. And nothing is more annoying than a website that takes forever to load. In fact, statistics have revealed that users will switch websites if the load time exceeds 5 seconds, five seconds! Which means you only have 5 seconds to retain the interest of a potential customer.

2). Measuring User Engagement

For a website that employs parallax scrolling, it is very difficult and in some cases, virtually impossible, to measure the level of user engagement using Google Analytics. This is because Google Analytics employs a JavaScript tracking code, which it uses to obtain user engagement calculations. Plus, it is impossible to figure out where most of the user traffic is headed, on a site that hosts just a single page.

3. Not Always Browser-Friendly

It might be possible that a parallax page does not work properly across all Web browsers. A page can run properly in Firefox but fail to do so in Google Chrome. The same can happen in the case of Internet Explorer and Safari. It might require extensive testing to make sure that everything works accurately across all web browsers.

4. Not Mobile or SEO-Friendly

The biggest risk of running a parallax site may be its inability to run properly on mobile web devices. And with the ever-increasing popularity of mobile smartphones and tablets, non-mobile user friendly websites will definitely be a burden on their business. Another peculiar issue with enabling parallax scrolling is the difficulty for developers to optimize the site for specific keywords. This is because it is difficult to optimize for multiple keywords on a single page of web content, compared to that of a multiple-page website.

5. How to handle Parallax Scrolling and SEO?

Irrespective of how complicated a technique parallax scrolling may be, if you really want the parallax effect on your site, there are a few structural ideas that you can use to run your website with parallax scrolling while also keeping it search engine optimized.

A solid start would be to assign all internal links to different sections of the parallax website, which would really help the search engines index page content.

Another point you should consider is that these navigation functions can also be used for internal linking at the same time. This ensures seamless accessibility to the webpage, allows you to use the parallax effect, and use multiple pages simultaneously. By doing this, you will effectively have multiple URLs while also performing keyword-
specific optimization on them. It’s recommended that you use tools like Ajax and the navigation functions to change the URL. This will improve the user experience since they will be automatically redirected down to the webpage to the relevant post with a special URL.

Finally, try starting your own blog and keep updating it frequently. This will not only impress your guests by keeping the parallax effect running smooth on your site, but the blog you just created will also increase the flow of traffic to your site.