I've read about escaped fragments, but I don't think that it applies here because what I need to do is to route specific URL routes to certain actions on the same page in a SEO-friendly way.
Consider an example: a page has 30 posts in it. The markup is already there, no AJAX magic here. Once a user clicks a URL like example.com/#/test-post, I want to open a popup with the post contents (suppose that test-post is the post slug or any other content identifier).
This applies to posts, image galleries and pretty much any content that I want to show in a popup by matching a URL route to a certain Javascript action. The technical part is a piece of cake, but how would this perform SEO-wise? I understand that using separate pages for individual posts would probably be best, but is it possible to allow a single-page website to be crawled for individual posts so that the test-post accessed through example.com/#/test-post via Javascript ends up as a separate link in Google search results?
Using Hash Properties in order to do different things on the same webpage via JavaScript might be really useful at some situations. However, looking it from a SEO prespective, I don't thing is a great solution at all.
The reason of that is that the fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document. As a result from a SEO prespective, only one page will be stored.
I would suggest you, to make usage of .htaccess and Friendly URLS to do so. For instance, this might look like this:
SEO friendly URL: `www.example.com/test-post`
window.onLoad = function(){
var URL = window.location.href;
switch(URL){
//Perfom different actions here
}
}
Related
I'm building an app in AngularJS and I was thinking about using SEO URLs. Currently my states are as follows:
article/page/:page - for a paginated listing of articles
article/:id - to view details of a single article
I thought about adding another state as follows:
article/:id/:seo
I would completely ignore the :seo state parameter, so no matter if the URL was
article/25/some-article-title or article/25/something-different, it would still display the exactly same article.
I would then simply link people to those URLs, but still ignoring the seo state parameter. It would only serve an informational purpose.
My question is if this is acceptable. All I found are high end javascript SEO frameworks on top of an already heavy framework. I don't need that. I just want a simple way to show people readable URLs.
As long as the canonical URL isset, the overall vanity URL matters little as the canonical one will be indexed.
A commercial example, ESPN do this all the time. Sometimes the URL conforms, sometime's it redirects to the correct page and if all else fails it just redirects to a search.
But no matter how many variations of the URL and how malformed it is, it takes away little, if anything, from the indexed content of the page.
However, if the ratio of total links to a url for a 301 redirect is overwhleming, it is indeed possible for the vanity url to appear in indexes despite it being a 301 redirect.
Again, ESPN as an example, searching the term site:espn.com/billsimmons will show an indexed page that will redirect to http://search.espn.go.com/bill-simmons/.
As long as you set the canonical URL, you should be fine.
I'm trying to post a link to various articles from my website to Reddit, but they all of the same root URL, but are differentiated by using the hashbang (#) to go to different articles. I wrote my front end in with a single page application framework (Ember.js), which defaults to using hashbangs to designate different pages. Thus, here are some examples of different blog posts:
http://noobjs.org/#/posts/15
http://noobjs.org/#/posts/16
They are different pages and different articles, but Reddit tells me that the link was already submitted since it must not view the hashbang as significant. Does anyone know if there is a way around this? The answer may be that I change my site so that it no longer uses the hashbang, but I'd rather avoid that so I don't break any other links I sent out.
Any ideas?
Reddit recognizes different query strings as being different pages. So, you can add a query string to the end that is the same as the hash.
http://noobjs.org/#/posts/15
http://noobjs.org/#/posts/16
become
http://noobjs.org/#/posts/15?/posts/15
http://noobjs.org/#/posts/16?/posts/16
It's not the prettiest, but it will work fine. Alternatively, you could write a check on page load against the URL to change ? into #.
window.location = window.location.href.replace("?", "#");
and post query string versions to reddit:
http://noobjs.org/?/posts/15
http://noobjs.org/?/posts/16
EDIT:
Currently, Ember does not have strong support for query parameters, but in this situation, a slight variation worked:
http://noobjs.org/?/#/posts/15
http://noobjs.org/?/#/posts/16
I am building a webapp and have a few arrays that I would like to pass through the URL in order to make the results of my application easily sharable.
Is there an efficient way to do this? I know a lot of websites (like youtube) use some sort of encoding to make their URLs shorter, would that be an option here?
Thanks in advance!
What I suspect you're asking is you have some page where the user can alter information, etc, and you want a way to create a URL on the fly with that information so it can easily be accessed again. I've listed two approaches here:
Use the query string. On your page you can have a button saying "save" that produces a URL with info about what the user did. For example, if I have a webpage where all I do is put my name in and select a color, I can encode that as http://my-website.com/page?name=John_Doe&color=red. Then, if I visit that link, your page could access the query object in JavaScript and load a page with the name and color field already set.
An approach for the "YouTube-style" URLs would be to create a hash of the relevant information corresponding to the page. For example, if I were creating a service for users to store plaintext files. These files are to have the following attributes: title, date, name, and body. We can create a hash of the string hash_string = someHashFunction(title+date+name).
Of course, this is a very naive hashing scheme, but something like this may be what you are looking for. Following this, your URL would be something like http://my-website.com/hash_string. The key here is not only creating these URLs, but having a means to route requests on the server side to the page corresponding to the hash_string.
I've a link on my webpage, say 'about'. Clicking on it loads a particular div without refreshing the whole page using jquery .load(). This does not change the URL string in the browser address bar.
The same page can be accessed by going to www.mydomain.com/?page=about.
So what I want to do is, when the user clicks on the 'about' link, the pages will be loaded as it is (using jquery), but I want to change the URL string in the browser address bar also so that someone can actually copy or bookmark the exact page.
Is it possible to do so??
You have two possibilites to tackle this problem:
In newer browsers you can make use of the HTML5 history API, which lets change part of the URL, also the query string (and path afaik).
In browsers which don't support this, you can only change the fragment identifier # without reloading the page (via the location object). That means you have to change the URL to e.g.
www.mydomain.com/#!page=about
#! is a convention from Google to make Ajax sites crawlable. As the fragment identifier is not sent to the server, you have to detect it with JavaScript and load the corresponding data from the server.
There are jQuery plugins that help you to handler this.
I would look for a good plugin makes use of the history API if available and falls back to the hash based solution.
As written in my comment, you can also find more information here:
How to change browser address bar without reloading page, especially #ThiefMaster's answer.
Yes, I've done it by doing
location.hash = 'foo';
There's other attributes of location you can change, not sure what it's called for '?', probably query-string, get, or soemthing like that.
How could a page display different content based on the URL hash?
I'm not talking about the browser scrolling down to display the anchored section, but something like JavaScript reacting to that hash and loading different content via AJAX.
Is this common or even probable?
Oh yes - it's becoming a common pattern to handle page-state-to-URL persistence when content is AJAX driven.
Javascript can access this value via window.location.hash. Once that's done, you can perform any actions based on the value of that hash
Show/hide nodes
Makes other AJAX calls
Change page titles or colors
Swap images
etc
Really, any DHTML effect.
This is occasionally done. Youtube uses hashes to link to specific timestamps within a video.
EDIT: I had assumed that you might have an issue where if the user goes up and manually edits the hash in the address bar, the page doesn't reload and even javascript will not know that it changed. I was wrong. I tried it on Youtube it works.
I just built a system to do this a few weeks ago
depeding on the browser you need to detect the hash, heres how to do that
// test all possible places hash could be on different browsers
if(window.location.hash){
hash = window.location.hash;
} else if (document.location.hash){
hash = document.location.hash;
} else if (location.hash){
hash = location.hash;
}
// some browsers start the hash with #, remove it for consistency
if(hash.substring(0,1) == '#'){
hash = hash.substring(1,hash.length);
}
Then handle the value of the hash variable to trigger page changes as you please.
for example:
http://www.example.com#pageA
if(hash = 'pageA'){
document.getElementById('mainContentDiv').innerHTML = '<p> content for the page displayed when the hash sais pageA</p>';
}
Sammy is a javascript library that does just this.
As JavaScript has access to the URL-string it could of course act differently on the contents of the url.
I've occassionally seen something like this but I don't think that this is a good way to react unless in very specific uses.
One of the uses I remember was TiddlyWiki using the after-portion of the hash to set preferences for the page rendering and such.
It is fairly common among AJAX-heavy applications (think Gmail) to be able to have all the AJAXy stuff while still making it possible for you to bookmark a particular page or link someone to a particular page. If they didn't do this, it would be considered bad for usability. It is fairly easy to get the URL hash by doing window.location.hash - so you can then have a switch-like statement on page load to execute a particular set of Javascript functions if a hash is present.
Some jQuery plugins that achieve this functionality: history/remote, history.
The answer for this question will be more or less the same as my answers for these questions:
How to show Ajax requests in URL?
How does Gmail handle back/forward in rich JavaScript?
In summary, two projects that you'll probably want to look at which explain the whole hashchange process and using it with ajax are:
jQuery History (using hashes to manage your pages state and bind to changes to update your page).
jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).