hash-tag

I’ve been recently engaged on a few SEO related initiatives and came across inquiries regarding the usage of “hash” symbols (formerly known as the “pound” sign) specifically in URLs and how they affect SEO rankings. Are these characters simply ignored by Google search crawlers, or does this make an impact that people should be aware of? How should these kinds of characters be used on the web? This is a brief description of where and how to implement these across your dynamic web applications.

A hash sign (#) in a URL is referred to as a ‘fragment’. In the past and with many legacy applications, URL fragments have been used to automatically set the browser’s scroll position to a predefined location in the web page, like a standard HTML4 ‘anchor’ link (used on many ‘link-farm style websites and old school Geocities sites). Applied in this manner, a URL refers to a document, then the fragment refers to a specific subsection of that document (or web page).

In recent years, however, this definition changed through the use of major Social NEtworking sites, primarily driven by the popularity and adoption of Twitter. Any information that appears after the first hash symbol in a URL is referred to as the fragment identifier – sometimes also called an anchor tag. By default, the fragment identifier is interpreted only by the local web browser and is typically not passed to the remote web server. For example, the following two links would both be considered requests for the same document by the web server:

• www.samplewebsite.com/colors.html#red
• www.samplewebsite.com/colors.html#blue
• www.samplewebsite.com/colors.html#yellow

Since the fragment identifiers (tags) in the example URLs above signify two different locations in the same page, search engines like Google, Bing, etc., will consider them both to refer to a single search result: www.samplewebsite.com/colors.html

For this reason, it’s important not to use fragments as a way to represent what should instead be different pages. In short, if you want Google to crawl two different pages and index them separately, you’re better off simply using two distinct URLs without fragments. However, in modern implementations, fragments are often used in a different way – to add dynamic functionality to websites and web applications. In this approach, a series of related requests are all processed by the same URL. So, in order to return different variations of the content, parameters are passed via URL fragments. Javascript is then used to interpret the fragment and update only portions of the page that need to change, without the need for a full page or browser refresh. This is typical of AJAX-style applications.

So, the question is, how does Google index distinct content within AJAX style pages? After all, we just said that Google will not consider the fragments in the URLs. The answer is Google has provided a syntax for working around this problem. It’s known as the “hash bang” syntax. By putting an exclamation point immediately after the hash sign, you’re telling Google that the fragments are not used for traditional scroll positioning but instead for loading separate content variations that should be crawled. With that approach, our example URLs with fragments could indeed be crawled and seen by Google. Our example URLs might then look like this:

• www.samplewebsite.com/colors.html#!red
• www.samplewebsite.com/colors.html#!blue
• www.samplewebsite.com/colors.html#!yellow

Remember, if you’re not using this special syntax, analytics reporting systems like Google Analytics may not be configured to track clicks on fragment links in your site. To ensure tracking works, either structure your content with distinct URLs or configure your Google Analytics code to also track fragment clicks.

Here are a few useful links regarding Hash Tags in URLs…

• Character Escaping (Stack Overflow) – http://stackoverflow.com/questions/5007352/how-to-escape-hash-character-in-url
• Fragment URLs (HTTP Watch) – https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/

Website Relaunch Checklist

Launching a new website can be a stressful time for any Product Manager and Development team, especially if you are dealing with a brand that has an existing web presence and site. I’ve had the luxury over the past decade or so of seeing some ultimate successes and failures, the latter typically a result of inexperience, demanding executives, or overly-complex technical solutions. Based on some recent feedback I provided to industry peers on this topic, I’ve compiled a modern website redesign “checklist” of the most critical tactics to consider when switching content management systems (CMS), launching or rebranding new content sections, or completely overhauling your entire web product.

1. Get to know Google Analytics if you don’t already: Google Analytics is easily the most-used and well-known analytics solutions, with an estimated 50% of the top 15 million websites online using the tool in 2015. I would also recommend using Google Analytics as a secondary metric, even if you are already using another Enterprise level utility such as Omniture or MixPanel. The generic version of Google Analytics is obviously free and offers fantastic benefits over traditional, proprietary code, including: page views and unique sessions, audience and engagement data, behavioral and mobile device info, as well as much more. In addition, you should be setting up “goals” in Google Analytics, which allow you to track link and content downloads, ecommerce transactions and other detailed site conversions (you can also give your set goals a specific dollar value to help determine ROI on marketing, if that makes sense for your business).
2. Know the difference between Google Analytics and Google Webmaster Tools: Just like Google Analytics, Google Webmaster Tools is also free, and is a fantastic SEO resource to optimize any website, from both a technical and keyword perspective. The two accounts like together and work together to provide insight day-to-day, but need to be individually set up and linked to an active Google account.  Webmaster Tools has features that allow you to check your site’s content index status, see why your pages are (or are not!) being crawled by Google search engine, submit XML sitemaps, generate critical Robots.txt files (which i’ll talk more about below), see broken links and view keywords that driving traffic to your site. Here is a link to setup an account in detail: https://www.google.com/webmasters/tools/home?hl=e
3. Create required website configuration files (Robots.txt and XML sitemap): When redesigning a website, it’s key that you create a robots.txt file to tell Google which pages should be crawled and indexed (and thus appear in the search engine referral pages – SERPs). You can obviously use this method to tell you which pages SHOULD NOT be crawled, which is equally important to ensure areas of your site don’t appear when they should not (such as old pages that are ‘going away’ with your new redesign). You want to remove pages from appearing in Google that won’t help your website rank for your strategic keywords. Please note that it can take Google up to a week to find and crawl new pages on your site, and about 1 day to “de-index” a page. It’s critical to note (incase you have no experience in Robots.txt files) that when creating a robots.txt file, be 100% certain that you do not, under any circumstances, add the following line to your Robots.txt file: Disallow: / . This one line of code, while not menacing to the naked eye, will make every one of your website pages uncrawlable. In addition, and equally as important as your Robots.txt file, create a XML sitemap and submit to Google via Google Webmaster Tools. This is a key step  in the process and the purpose is to let Google know which pages you really want people to see.
4. Create your relaunch URL strategy: Every website relaunch comes with a batch of existing URLs, and you need to ensure there is no loss of traffic on day 1 by having a proper and encompassing URL strategy. Too many times I see website relaunches that kill an existing base of search engine traffic (which can take YEARS to recover from if not done properly), simply because there was not enough attention on knowing your URLs.  The usage of Canonical Tags is critical to ensure that if there is any change in structure, you need to tell Google the new URL and what the primary URL will be going forward.  This is especially important for article pages and content driven websites. In addition, you need to collect a list of all your URLs (an inventory is a good idea) and create a 301 Redirect plan. This will ensure that if you have users that bookmarked pages or using an old URL, they will find the new location with ease. Canonical Tags and 301 Redirects are near the top of my list when it comes to a successful relaunch, or a failed relaunch. Don’t give your traffic away!
5. Know your website keyword targets, and build an SEO strategy: Choosing the right keywords to optimize your content for is critical. Use Google’s Keyword Planner if you have never done this before, ensure to include both keywords and phrases. Its also a good idea to get to know your competition in the market and see what keywords they are ranking for (and use them on your website). Consider focus on longer-tailed keywords with less competition at launch, then work in more competitive keywords into your content over time. I’ve found that chunking keywords by theme, and focusing on one or two themes at a time (until you start seeing ranking improvements) is also a great strategy for companies going through a redesign. Every page has a META TITLE and DESCRIPTION, these should be unique on every page of your website. If Google finds duplicate meta titles repeated over and over again on every page (which is a common mistake on website relaunches to ‘save time’ during development), the less likely your site will be to rank in the SERPs. Make sure you can edit these tags on-the-fly, and integrated smartly so that article keywords can be easily manipulated by Web Editors with as little effort as possible. In addition, other SEO items that should be given attention prior to relaunch such as H1, H2 tags, Image ALT Tagging, and consolidation of external file references in CSS and JavaScript.
6. Every single page should have at least 150-200 words of unique content: Content is king. This is an essential rule in the Search Engine Optimization world is to have at least 150-200 words of unique content. This can be difficult on certain sections of your site (such as Marketing and Static sections) but it’s worth it to attempt these goals. Website redesigns give you the perfect opportunity to audit your company’s content inventory, find gaps and start creating the content needed to help your customers fulfill their search intent. Another good method to create content quickly is to setup an associated Blog. This is a great way to ensure your company keeps up on creating new, relevant content. WordPress pulled some pretty incredible stats on Blogs in 2014, capturing almost 20% of the entire web industry (AMAZING!). If your brand doesn’t have a blog, the train has left the station. It could be the fastest and brightest train ever, so start running.

Hopefully you found this website redesign checklist to be helpful! I would also recommend doing enough competitive analysis to know what you’re up against in the market, and it would be especially useful to create an audience / customer persona. Know what your audience needs, and if you don’t know, try engaging with them through simple methods like surveys and polls (Try SurveyMonkey) to see what they want instead of what you think they want. You can also use many other online tools, such as the “Website Launch List”, a SaaS based tool to keep track of items as you proceed forward with your project. http://lite.launchlist.net/

As with previous changes to algorithm within Google’s search index, this new addition could have a serious impact on click-through rates and external traffic patterns, but it is probably to early to tell if this will have any major impact at all. This will likely have an impact on overall Page Rank (by having mobile visitors turned away from your site), and something to keep in mind when building for the web or deciding upon website redesigns that are mobile-compatible and responsive.

Here are 2 key factors to think about when deciding upon website details impacted by this upcoming change to Google’s search algorithm.

1. Avoid using Flash. I assume this is obvious, but all content within Flash will not be indexed or viewed on a mobile device, unless you happen to be using a Flash optimized browser like ‘Photon’ (but seriously, no one uses that). In general, stop using Flash and build HTML5/CSS based interactives and ads.
2. Readable text (without manually zooming). Web sites should be adjusting content to the screen size automatically using CSS, so end users do not have to scroll horizontally or manually zoom in.

Even if you assume your site is ‘probably ok’, it’s worth it to try Google’s mobile-compatible testing utility. You never know what it might tell you about your own site! The best part about using this free service is that it will automatically tell you how to fix any issues, if encountered. If anything, you’ll know if you need a major overhaul, or just a few tweaks.