"Is there a way to bypass the SEO restrictions of AJAX with Anchored

We are all familiar with building AJAX sites that have a 300ms trigger for checking anchors in the URL and then loading the proper page with AJAX. However, these anchor links do not provide any benefit to search engines =(

I have come up with a potential workaround. All JavaScript code remains unchanged, but there is this small adjustment (I'm using JQuery, apologies):

$('a').live("click",function(){
    var lnk = $(this).attr("href");
    document.location.hash = lnk;
    return false;
})

By replacing anchor links in the body with plain links, we can create corresponding plain pages (which still contain all JavaScript codes) for non-JavaScript users and search engines. For regular visitors, we can dynamically convert plain links into hashes on the fly and load AJAX content instantly. Users searching through search engines will be directed to specific pages and can continue navigating with AJAX... somehow (remember, those direct pages still include JavaScript code).

I just want to verify if my assumptions are correct. Are they?

Update: One downside is that when a user directly enters an internal page with an address like /portfolio, they may be redirected to URLs such as /portfolio#contacts which aren't aesthetically pleasing, although they still function correctly (in this example, displaying contacts).

Answer №1

It might not be the most effective strategy because every link's click event would trigger the function, even for links where you don't want to use AJAX, like external sites or "javascript:..." links.

If you group your AJAX links together with a specific class or attribute and adjust your jQuery selector accordingly, it will work well. This method is SEO-friendly and ensures graceful degradation for users who have JavaScript disabled.

Alternatively, if SEO is your main concern, consider looking into what a sitemap.xml file is and how to implement it. Wikipedia has an informative article on this topic.

Answer №2

Seems like a solid idea... my only recommendation would be to include the callback for your 300ms timer within the event mentioned above as well. This way, you can immediately see the result when clicking a link (and users can also achieve the same effect by directly entering the link in the address bar).

Answer №3

Hello there, I recommend checking out jQuery Ajaxy. It efficiently enhances websites with ajax capabilities while ensuring SEO and accessibility for users without JavaScript.

You can witness this feature in action on an upcoming website. All links function as normal even in an Ajax application, allowing users to easily navigate the site.

For more information and examples, visit the demo page at:

Implementing jQuery Ajaxy is uncomplicated yet incredibly powerful, with excellent support available.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to rotate an image with a random angle when hovering in Angular?

I'm currently working on a photo gallery project and my goal is to have the images rotate when hovered over. However, I am experiencing difficulties in passing values from TypeScript into the CSS. HTML <div class="back"> <div cl ...

Exploring Javascript/JQuery parameters based on data types

I'm a bit confused about whether the title accurately reflects my question. I need help understanding how jQuery deals with functions that are called with different argument combinations, such as ("Some String", true, function(){}) and ("Some String", ...

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...

What could be causing the stack overflow in this (partial) MergeSort Implementation?

As I'm working on my own version of MergeSort, which implements recursion with a base case, the only issue I have yet to address is how arrays are imperfectly halved when their length % 2 != 0. For now, I require arrays of a length that is a power of ...

Troubleshooting: Unable to trigger click event on Vuejs component

Working with Vuejs and Vuikit components, I have set up the following structure: <template> <div class="uk-scope"> <vk-modal :show="isShow" v-if="config"> <vk-modal-close @click="alert('hello!')" large& ...

Express get requests are failing to handle query strings

Whenever I try to extract the year and month from the URL like this: http://localhost:3000/api/posts/2018/4, the code doesn't seem to work properly. Instead, it returns an error saying: Cannot GET /api/posts/2018/4 Here's the JavaScript code I&a ...

Eliminate an element from the Masonry layout using the "Delete" feature by clicking on a designated button

Introduction: I have implemented the Masonry Cascading grid layout library along with the Masonry Remove Method feature. This functionality allows users to click on any part of an item, remove it, and smoothly adjust the layout accordingly. Concern: My ...

Is there a way to refresh a webpage without reloading by using Ajax in conjunction with Django Rest Framework?

I am currently working on a Django project where I need to develop a page that uploads real-time data without refreshing the entire page. This data is fetched from a database, so I have set up an API endpoint using Django Rest Framework. However, I am uns ...

Interacting with jQuery through live events and handling callbacks when using WCF services

Currently, I am developing a web application using asp.net, c#, and jquery. The majority of my work involves generating dynamic HTML content for the browser and utilizing various web services to fetch the necessary data. One of my service calls looks like ...

Implementing Do Not Track in an express application

I am trying to implement a feature named "consent" in my Nodejs express app that utilizes the Do Not Track (DNT) functionality from browsers. This function is supposed to integrate Google analytics on rendered pages only when DNT is not active or its state ...

Implementing a Scalable Application with React Redux, Thunk, and Saga

What sets Redux-Saga apart from Redux-Thunk? Can you explain the primary use of redux saga? What exactly is the objective of redux thunk? ...

The Vue property or method is unrecognized when utilizing the non-minified version

When I attempted to display the name 'John' using an inline template in a simple Vue example, I encountered the following error message: [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. ...

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

What is the best way to refrain from utilizing the && logical operator within the mapStateToProps function in Redux?

When I'm trying to access a nested state in a selector, I often find myself having to use the && logical operators. const mapStateToProps = store => ({ image: store.auth.user && store.auth.user.photoURL; }); If I don't use ...

The error message in Express points to module.js line 550 and states that the module cannot be

I am currently in the process of setting up a basic express application using the code below: const express = require('express'); const app = express() const bodyParser = require('body-parser'); const cookieParser = require('cooki ...

I am getting NaN as the output from my function, but I am unsure of the reason behind

For pracitce, I have created this code to calculate the total amount spent on gas and food using arrays. However, I am encountering an issue where it is returning NaN. const gas = [20, 40, 100]; const food = [10, 40, 50]; function total(gas, food) { ...

rxjs iterates through an array executing each item in sequential order

Is there a way to make observables wait until the previous one has completed when they are created from an array? Any help is appreciated! export class AppComponent{ arr: number[] = [5, 4, 1, 2, 3]; fetchWithObs() { from(this.arr) ...

Exploring the Dynamic Routing Features of Next.js

After diving into Next.js, I found the learning curve to be manageable since React was already familiar territory for me. Currently, my focus is on implementing dynamic routing in my application - Starting with my live/index.js file - (Where I utilize ge ...

Creating a square shape in Twitter Bootstrap to frame an item on a webpage

I've been working on creating a webpage that looks similar to the image provided. I've managed to get about 90% of it done, but there are a couple of issues I'm facing: How can I create a square with a triangle at the bottom as shown in th ...

Learn the process of updating a specific section of a Facebook share link using AJAX dynamically

Here's an interesting scenario I'm dealing with. I'm trying to create a modification to the Facebook share button link where a portion of the link is replaced by a user ID number. This way, when someone clicks on the shared link, it will dir ...