|
|
Create Crawlable, Link-Friendly AJAX Websites Using pushState() |
Create Crawlable, Link-Friendly AJAX Websites Using pushState() Posted: 26 Feb 2012 01:11 PM PST Posted by RobOusbey Many people have an interest in building websites that take advantage of AJAX principles, while still being accessible to search engines. This is an important issue that I've written about before in a (now obsolete) post from 2010. The tactic I shared then has been superseded by new technologies, so it's time to write the update. This topic is still relevant, because of a particular dilemma that SEOs still face:
The solution I had previously recommended ends up with the #! (hashbang) symbols littering URLs, and has generally been implemented quite poorly by many sites. When I presented on this topic at Distilled's SearchLove conferences in Boston last year, I specifically called out Twitter's implementation because it 'f/#!/ng sucks'. Since I made that slide, it's actually got worse. Why talk about this now? I was driven to blog about this now, because after some apparent internal disagreements at Twitter in early 2011 (c.f. this misguided post by one Twitter engineer, followed by this sensible response by another) they seem to working to reverse the decision and replace all those dreadful URLs for good. Even though Twitter shouldn't be held up as the paragon of great implementation, it's valuable for all of us to look at the method that many smart-thinking websites (Twitter included) are planning to use. In general, I'm surprised that we don't see this approach being used more often. Creating fast, user-friendly websites that are also totally accessible by search engines is a good goal to have, right? What is the technology? So - drumroll please - what is the new technology that's going to make our AJAX lives easier? It's a happy little Javascript function that's part of 'HTML5 History API' called window.history.pushState() pushState() basically does one thing: it changes the path of the URL that appears in the user's address bar. Until now, that's not been possible. Before we go further, it's worth reiterating that this function doesn't really do anything else - no extra call is made to the server, and the new page is not requested. Plus - of course - this isn't available in every web browser, and only modern standards-loving browsers (with Javascript enabled) will be able to make use of it. In fact, do you want a quick demo? Most SEOmoz visitors are using a modern browser, so this should work for you. Watch the page URL and try clicking ON THIS TEXT. Did you see the address change? The new page URL isn't a real location, but - so far as you're concerned - that's now the page you're looking at. SEOmoz readers are smart people; I expect that you're realizing various ways that this can be valuable, but here's why this little function gets me excited:
The ExamplesI launched a pushState demo / example page to show how all this performs in practice. Click the image above to visit the demo site in all its glory. If you click between the cities in the top navigation, you'll be able to see that only the main content is being loaded in with each click; the page navigation. (This can be confirmed by playing the Youtube video on the page; notice that it doesn't stop playing as you load in new content.) If you want to see a bunch of examples of this 'in the wild', you can take a look at almost any blogspot.com-hosted-blog with one of their new 'dynamic views' in place, just add '/view/sidebar' to the end of the URL. For example, this blog: http://n1vg.blogspot.com can be viewed with the theme applied: http://n1vg.blogspot.com/view/sidebar If you click posts in the left hand column on that second link, you'll see the content get loaded in with very impressive speed; the URL is then updated using pushState() - no page reload took place, but your browser still reflects the appropriate URL for each piece of content. The Techie Bit If you like the sound of all this, but you start to feel out of your depth when it comes to tech implementation, then feel free to share this with your developers or most tech-oriented friends. (References are linked at the end of this post.) The important function we're utilizing takes three parameters: window.history.pushState(data, title, url) There's no value in worrying about the first two parameters; you can safely set these to null. In the brief example I gave at the top of this post, the function simply looked like this: window.history.pushState('','','test/url/that-does-not-really-exist') Our workflow for implementing this looks like the following:
By having your internal links work 'as normal' and then adding this AJAX/HTML5 implementation on-top, you are taking advantage of the benefits of 'progressive enhancement': users with up-to-date browsers get the full, fast and spiffy experience, but the site is still accessible for less capable browsers and (critically in this case) for the search engines. If you want some code to implement this, you can take a look at the head section of the demo that I shared above - that contains all of the Javascript necessary for doing this. Basic code for getting this done looks like this: // We're using jQuery functions to make our lives loads easier $('nav a').click(function(e) { url = $(this).attr("href"); //This function would get content from the server and insert it into the id="content" element $.getJSON("content.php", {contentid : url},function (data) { $("#content").html(data); }); //This is where we update the address bar with the 'url' parameter window.history.pushState('object', 'New Title', url); //This stops the browser from actually following the link e.preventDefault(); } Important Caveat Although the code above works as a proof of concept, there are some additional things to do, in order to make this work as smoothly as my demo. In particular, you'll probably want the 'back' button on the user's browser to work, which this code snippet won't allow. (The URL will change, but the content from those historical pages still needs to be loaded in.) To enable this, you'll need the popState() function; this detects a URL change, allowing you to fire whatever function you have for grabbing page content and loading it in. Again, you can see this in action in the head of the demo page at http://html5.gingerhost.com. Resources and Further Reading: There are plenty of resources that cover the HTML5 History API pretty thoroughly, so I'll defer to them in letting you read about the details at your leisure. I'd suggest taking a look at the following
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read! |
You are subscribed to email updates from SEOmoz Daily SEO Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
"What do you think we ought to do about education?"
My readers ask me that question more than just about any other. So here's my question back: What is school for? (Click the link to get to the free download).
I've just published a 30,000 word manifesto, totally free to read, share, translate, print and, most of all, use to start an essential conversation. It took a lot to get it to you, and I'm encouraging you to take a few minutes to check it out. After you read it, perhaps you'll write one of your own.
This is an experiment in firestarting--I'm hoping that removing friction from the sharing of this idea will help it spread. If you're interested in the topic (and I hope you are), please tweet or like the project page, download the files, post mirror copies on your own blog and if you can, email them to every teacher, parent and citizen who should be part of the discussion about what we do with our kids all day (and why). If just a fraction of this blog's readers shared it with their address book, we'd reach a lot of people.
If you get a chance, visit the page and give a shoutout to a teacher that's made a difference to you or your kids. Ultimately, our future belongs to a generation that decides to be passionate about learning and shipping, and great teachers are the foundation for that.
[You're getting this note because you subscribed to Seth Godin's blog.]
Don't want to get this email anymore? Click the link below to unsubscribe.
Your requested content delivery powered by FeedBlitz, LLC, 9 Thoreau Way, Sudbury, MA 01776, USA. +1.978.776.9498 |
Mish's Global Economic Trend Analysis |
Posted: 26 Feb 2012 10:58 AM PST It is possible if not likely we have to suffer through at least 11 more Groundhog days as Greece sets March 8 deadline for investors in bond swap. Greece has set a March 8 deadline for investors to participate in its unprecedented bond swap aimed at sharply reducing its debt burden, according to a document outlining the offer.Interior Minister Says Greece Should Exit Eurozone In yet another break in Merkel's ranks, German interior minister Hans-Peter Friedrich says Greece should exit eurozone. With German Chancellor Angela Merkel facing a parliamentary vote Monday on a second Greek bailout, her interior minister, Hans-Peter Friedrich came out over the weekend in favour of Greece leaving the eurozone.It should have been obvious Germany wanted Greece out of the Eurozone no later than January 27 when Merkel demanded Greece to Cede Sovereignty to Eurozone "Budget Commissioner". Merkel's Official Denial "I will have no part in forcing Greece out of the euro" Should have made it all the more clear on February 7. At the same time Schäuble started "Salami Tactics" on German participation (see above link). On February 23, came the Pact With the Devil Over Gold. Then on February 23 Troika Demands 38 New Changes in Greek Tax, Spending and Wage Policies in Next 6 Days. Finally, at long last, the German Interior Minister came flat out and stated what previously Finance Minister Wolfgang Schäuble only hinted at, and Merkel herself "officially denied". As I have said many times, Merkel's denial is not plausible. She just not does to be on record as the person causing any country to exit the Eurozone. Merkel is to be pitied for one of two reasons.
I vote for door number 2. Mike "Mish" Shedlock http://globaleconomicanalysis.blogspot.com Click Here To Scroll Thru My Recent Post List Mike "Mish" Shedlock is a registered investment advisor representative for SitkaPacific Capital Management. Sitka Pacific is an asset management firm whose goal is strong performance and low volatility, regardless of market direction. Visit http://www.sitkapacific.com/account_management.html to learn more about wealth management and capital preservation strategies of Sitka Pacific. |
You are subscribed to email updates from Mish's Global Economic Trend Analysis To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
One of the dumbest forms of criticism is to shout down an expert in one field who speaks up about something else. The actor with a political point of view, or the physicist who talks about philosophy. The theory is that people should stick to what they know and quietly sit by in all other situations.
Of course, at one point, we all knew nothing. The only way you ever know anything, in fact, is to speak up about it. Outline your argument, support it, listen, revise.
The byproduct of speaking up about what you don't know is that you soon know more. And maybe, just maybe, the experts learn something from you and your process.
No one knows more about the way you think than you do. Applying that approach, combining your experience, taking a risk--this is what we need from you.
[You're getting this note because you subscribed to Seth Godin's blog.]
Don't want to get this email anymore? Click the link below to unsubscribe.
Your requested content delivery powered by FeedBlitz, LLC, 9 Thoreau Way, Sudbury, MA 01776, USA. +1.978.776.9498 |
Mish's Global Economic Trend Analysis |
Posted: 25 Feb 2012 01:25 PM PST The gall, arrogance, and stupidity of public union pandering has reached new heights. A senate bill sponsored by written by Sen. Kevin de León, D-Los Angeles seeks to force businesses with five or more employees to create personal defined benefit plans, managed by CALPers. The Sacramento Bee reports California Democrats push pension plan for nongovernment workers Senate Bill 1234, written by Sen. Kevin de León, D-Los Angeles, would require businesses with five or more employees to enroll them in a new "Personal Pension" defined benefit program or to offer an alternative employer-sponsored plan.Pure Insanity There is no polite way to put this so I won't. Sen. Kevin de León is clearly a certifiable nutcase. Stoctkon and Vallejo California are both bankrupt over insane promises made to public union employees. So is Detroit Michigan, Central Falls Rhode Island, Providence Rhode Island, and Harrisburg Pennsylvania. Numerous other cities will eventually be forced to seek bankruptcy. Los Angeles and Oakland and at the top of the list. Numerous airlines and GM went bankrupt over defined benefit pension plans. De León's bill would bankrupt countless small businesses trapped in its wake. Things That Would Happen If Passed
States on the Right Path The road to reform is 180 degrees opposite. Governor Scott Walker in Wisconsin, Governor John Kasich in Ohio, and Governor Mitch Daniels are on the right path. Five Point Road to Reform
Corruption of America The gall, arrogance, and stupidity of Senate bill 1234 sponsored by Sen. Kevin de León, D-Los Angeles, is absolutely stunning. Here are a few particularly relevant paragraphs from my post Fatally Flawed Approaches to the Budget Deficit and Taxes; Debt Will Swell Under 3 of 4 Republican Hopefuls' Tax Plans Porter Stansbury wrote a tremendous article on The Corruption of America and how public unions are at the center of it.Tax reform alone cannot and will not work. In addition to a balance budget amendment, something must be done to rein in the power of public unions and corporate lobbyists at the center of this mess. Ending collective bargaining rights of public unions and passing right-to-work legislation would be a wonderful first step. Addendum: I missed the words "Employers could make voluntary contributions into the fund." Sorry, but I still don't buy it. This would be the first step towards mandated involuntary contributions. Moreover, maintenance of the plan would cause headaches, and giving money over to CALpers to manage is inane. If people want to enter such programs on their own, let them. Mandating businesses offer such plans is another ridiculous burden on all businesses, especially small businesses. Nothing at all stops private companies from offering such plans. Who is going to guarantee these benefits anyway, and who will be at risk when the plans fail to meet the goals? The answer today may be one thing, the answer down the road is sure to be taxpayers and businesses. Mike "Mish" Shedlock http://globaleconomicanalysis.blogspot.com Click Here To Scroll Thru My Recent Post List Mike "Mish" Shedlock is a registered investment advisor representative for SitkaPacific Capital Management. Sitka Pacific is an asset management firm whose goal is strong performance and low volatility, regardless of market direction. Visit http://www.sitkapacific.com/account_management.html to learn more about wealth management and capital preservation strategies of Sitka Pacific. |
160 German Tax Collectors Volunteer to "Help" Greece Posted: 25 Feb 2012 12:22 PM PST Goodness gracious, how gracious! The German business weekly WirtschaftsWoche reported Saturday that Germany offers to send tax men to Greece The German government is prepared to send 160 financial experts to Greece to help the country overhaul its tax collection, the business weekly WirtschaftsWoche reported Saturday.Is this tax collection help or the beginning of colonization? Mike "Mish" Shedlock http://globaleconomicanalysis.blogspot.com Click Here To Scroll Thru My Recent Post List Mike "Mish" Shedlock is a registered investment advisor representative for SitkaPacific Capital Management. Sitka Pacific is an asset management firm whose goal is strong performance and low volatility, regardless of market direction. Visit http://www.sitkapacific.com/account_management.html to learn more about wealth management and capital preservation strategies of Sitka Pacific. |
You are subscribed to email updates from Mish's Global Economic Trend Analysis To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
Google Analytics Certification and How to Pass the GAIQ Test |
Google Analytics Certification and How to Pass the GAIQ Test Posted: 24 Feb 2012 01:33 AM PST Posted by Slingshot SEO This post was originally in YouMoz, and was promoted to the main blog because it provides great value and interest to our community. The author's views are entirely his or her own and may not reflect the views of SEOmoz, Inc. When I hear the word, “cookies,” I generally think of warm, gooey homemade chocolate chip cookies. But when it comes to passing the Google Analytics Individual Qualification (GAIQ) test, I had to put my cravings for Mrs. Fields’ Nibblers aside and learn about the differences between first-party and third-party cookies.
Cookies are just one of the many topics covered on the exam, and passing can be a daunting task, especially for those unfamiliar with the program and its ever-changing features. The GAIQ test is one of the best ways to become a more knowledgeable user and deepen your understanding of Google Analytics. For those to new to GA or seeking additional tips & tricks, check out our Google Analytics Guide. Studying for the exam can be a fun process, and I would like to offer some advice so that you can pass as well. The GAIQ TestThe test is limited to 90 minutes, consisting of 70 multiple choice questions with two to five answer choices. The trickiest part is that some questions ask you to select "all that apply," which means there can be up to 24 possible answer combinations for those questions (assuming you have to select one answer). The test can be accessed at the Google Testing Center, and each sitting costs $50. During the test, you have the ability to pause and come back anytime within the next five days. Although the questions vary in difficulty, it's an open book exam. The pass mark is 80%, which means you must answer at least 56 out of 70 questions correctly. Preparing for the ExamAll the topics and content covered on the exam are available through Google’s Google Analytics IQ Lessons, formerly known as Conversion University, which consists of online lessons that are freely available for viewing at your leisure. There are 21 different presentations that are easily digestible and will last a total of roughly 2 hours and 15 minutes. However, these presentations move fairly quickly, so I recommend pausing and taking notes that you can use during the exam. A rough outline of topics is listed below:
The GAIQ lessons are the best way to study for the test and should be your starting point. I recommend watching each video at least twice, and using your own Google Analytics profile in tandem with the videos, to practice and walk through each lesson to make sure you understand the topics. It is important to note that there have been many changes to Google Analytics over the past year, and Google has updated its exam in January 2012. The fundamental material covered on the exam has stayed the same, but if you are still using the old version of Analytics, you may want to get used to the new version and all of its new features before taking the exam. I would not be surprised if Google started asking questions on features that are only available in the new version (multi-channel funnels, real-time analytics, social plugin analytics, and flow visualization). Also, there is always a chance that Google has made an update, but hasn’t changed the test question or GAIQ lesson videos. For example, the “__utmc” cookie is no longer used by the Google Analytics tracking code to determine session status, but it is still mentioned in the GAIQ lessons and could still be asked about on the exam as one of the cookies that Google sets. When in doubt, I would answer questions like this based on whatever has been taught in the GAIQ lessons. It is more likely that Google would not change the test without updating the videos first. When Taking the ExamFor a “pass-the-exam” strategy, the most important thing to remember is to keep moving. Answer all of the easy questions first and don’t get tied down by any one question. You have roughly 1 minute and 16 seconds to answer each question, so if you answer all of the easy ones first, you can judge how much time you have left to finish the remaining, tougher questions. You have the ability to mark questions, answer them, or leave them incomplete. A good strategy is to answer the easy ones, mark the questions that require some research, and leave the questions you have absolutely no idea about blank. That way, during your second run-through, you can review all marked questions first and do the most difficult questions last. I feel safe in assuming that all questions are weighted equally in the score and that there is no penalty for guessing incorrectly. During the test, I recommend having the following resources open on your computer: Google Analytics IQ Lessons, an Analytics account, the Google Help Center, and Jens Sorensen’s test notes. There will be some questions that require research, so keep these resources close. Practice ProblemsI’ve included some original practice problems with solutions that will help you get ready for the exam. These problems are meant to challenge you, but do not necessarily represent how Google will test you on these topics. These problems should be a final test to take after watching all of the GAIQ lessons. They are available for download in the link below :-) Passing the ExamIf you pass, Google sends you an email with an official certificate showing that you have passed the exam. The certificate is valid for 18 months from the date of the passed exam. Google does not give you the results for each question, but it lists the percentage of questions you answered correctly, and the four most missed topics on your exam.
Sometimes, the difference between passing and failing can be a matter of how you interpret some of Google’s questions. They can be quite tricky, so be sure to pay attention to detail on every question. If you fail, you may take the exam again, but you have to wait 14 days and can only take it twice within a 30-day period. You have to pay the $50 fee for each sitting, so do your best to pass it the first time. If you’ve taken the exam, we’d love to hear your thoughts and study tips. Or if you have any other questions, please leave a comment! Best of luck! Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read! |
You are subscribed to email updates from SEOmoz Daily SEO Blog To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |