Top SEO Audit Tools For Better Analysis Of Websites

Search engine optimization (SEO) is an important aspect for the professionals who wish to boost their businesses over the internet. In the current scenario, every business has its own website to promote the related services. Websites are an important medium of advertisement for a number of businesses and thus it is important to analyze the true potential of your website. When we talk about the true potential of any website, we mean the number of audience it could attract to promote the services among general masses.

A number of SEO audit tools are there that could help in website analysis. These tools are exceptionally well as they help determine the volumes of traffic your website is getting. In addition to this, it helps in checking a number of other SEO related issues, which is of course a benefit for the person who is using the tool. In the list of exceptional tools, we are focusing on the prominent ones. These tools are generally used for SEO audit purposes and are exceptional in a number of ways. Here is more on these SEO audit tools.

by Guest Author via Digital Information World

Progressive Web Apps: Bridging the Gap Between Web and Mobile

[special]In this article, we'll go through the basics of what a progressive web app (PWA) is, study some real life cases, and explore other uses and situations in which a PWA can be used to great effect.[/special]

Nowadays, significant numbers of people are connected to the internet almost everywhere they go. There are, however, still an even larger number of users with intermittent access, such as users on mobile data plans, shared internet access and so on. Catering to these users requires changes to the information flow we're used to.

By allowing users to keep browsing once they're offline, serving the pages they've already visited, it's possible to retain visitors and customers who would otherwise be in the dark once their internet is cut off.

It's even possible to use the cached data and program functions for that, allowing for interactivity similar to mobile applications, but without the need for the user to download an app via the various app stores, and similarly, without the need for submitting to them as well.

What is a Progressive Web App?

When trying to understand what exactly a progressive web app is, it might be easiest to compare relative to both websites and mobile applications. In the table below, some, not all, of the more prominent features are sidelined with PWAs in the middle, symbolizing the gap-bridging functionality of the progressive web apps.

Features	Website	Progressive Web App	Mobile App
Offline	NO	YES	YES
App Stores	NO	NO	YES
Responsive	YES	YES	YES
Searchable	YES	YES	NO
Local notifications	NO	YES	YES
Push notifications	NO	YES	YES
Download to install	NO	NO	YES
Fast updates	YES	YES	NO

Keep in mind that the entire term "progressive web app" loosely contains a number of relevant and some irrelevant information and criteria. Technically, there are four requirements (see below) that define what a PWA is, currently supported by Google Chrome, Opera and Samsung Internet.

Once these four criteria are fulfilled, developers are free to customize the functionality according to their own wishes, so we can see both offline error pages, and full-on offline browsing depending on what project and site we're visiting.

Becoming Progressive

In order for any online site to be recognized as having a progressive web app installed on the server --- and thus include the prompt “Add To Home Screen” for users --- there are four main requirements as set out by Google:

• a site must be visited twice with a 5-minute interval to qualify
• secure HTTPS connection Valid
• JSON Manifest installed Valid
• Service Worker installed.

Site must be visited twice with a 5-minute interval to qualify

In Google Chrome, it's necessary for users to have visited the site hosting the PWA twice before the browser will show the prompt for installing the PWA.

It's not the most reliable form of verification, but nonetheless, it seems to work fine, as first-time visitors won’t get bombarded with the prompt taking up 25% of a mobile screen, and furthermore, it ensures that users are somewhat interested in that particular site, seeing as how they’ve already visited it before.

However, this is a simple way of determining user relevance and interest, and one could guess that this qualification parameter will be changed to something more substantial in the future. But for now, it seems Google developers are content with this measurement.

Secure HTTPS connection

By having a secure connection to the progressive web app, users can feel relatively safe by allowing permissions to the PWA.

Since the network requests are routed through the service worker script, adding https to the server helps to mitigate certain vulnerabilities such as snooping.

While this requirement might be focused mainly on adding safety from hijackers, having a secure connection also helps build trust with users. And since PWAs are indexable by search engines, it also makes sense to serve over TLS, since it adds a small amount of benefit SEO-wise.

Valid JSON Manifest installed

By providing a data extract in the format of JSON, it's then possible to cache this information with the help of the service worker, and then use the app shell to load CSS rules to deliver an offline version with full UI capabilities.

Any time a visitor loads a new page, the service worker will cache the JSON extract, and store it physically in the app shell. This app shell is a self-contained wrapper that has all necessary style sheets, scripts, images, fonts and HTML outputs required for a user to render a complete page without loading anything else.

Compared to a website, a PWA has the capability of still showing data when the users are no longer connected to the internet.

Continue reading %Progressive Web Apps: Bridging the Gap Between Web and Mobile%

by Mark Pedersen via SitePoint

Landing Page Design: 15 Tips for High Conversions

The biggest challenge that most marketers face while running any campaign is a low rate of conversions on landing pages -- but there are many ways to improve your landing page design to deal with this problem.

According to Marketing Sherpa only “48% of marketers build a new landing page for each marketing campaign.” Meanwhile, “companies with 40+ landing pages get 12 times more leads than those with 5 or less.”

Here are some useful tips for creating high conversion landing pages.

Get Insights about Your Audience

You need to understand your target audience and figure out what value they are looking for in your niche. You need to clearly define the consumer need gaps you are trying to fill with your products and services.

Your business is out there to provide solutions to customer problems. A landing page helps you communicate this solution in the most effective manner. The Weebly landing page specifically targets small business owners and startups:

Stay Focused

Your company may offer a variety of products and services. Don't try to sell everything from a single landing page. You need to segment your audience before creating campaigns and landing pages. Target each segment with specific products or services.

Key Features

An important element of your landing page is a description of the ‘key features’ of your products and services. You can create a bulleted list below the sub-head of your page. Features are helpful in getting users to understand the services better. Here is an interesting example:

Lead Magnets

There are many ways to add value to your target audience. You can provide them with free-to-download eBooks, white papers and other informative stuff like blog posts or infographics. You can also add interesting videos to your landing pages, to improve the user-experience. Understand what sort of information, content or advice your target audience is looking for and then choose the best option.

Important Information First

You need to introduce all the critical information on your page as quickly as possible. This will help get your page visitors to make a decision quickly. The content before the first fold will either get the visitor to scroll down or close the page.

You need to add targeted messaging with your product’s core value proposition before the first fold. It should highlight some of the key reasons to buy. An attention grabbing headline that communicates value is a must. You can make the design visually appealing to create stickiness. Add a CTA to ensure quick action from the user.

Compelling Headlines

The headline is the first part of a landing page that users view and read. Your landing page headline must connect with the target audiences emotionally. You need to communicate about the problem that they might be facing and how your business provides the right solution. Making your headline copy detailed and adding specific data can make it more convincing for the users. You need to balance this with keeping your headline short and simple. Have a look at this convincing example:

Add Testimonials

You need to provide reasons for your prospects to convert. Adding real testimonials from existing clients can help. Make sure you are highlighting the best ones, and not cluttering the page. You can also showcase some of your key clients to improve your trustworthiness.

Any awards and recognitions can help as well. Here is an example from Autopilot:

And here’s an interesting way to add client logos to the landing page:

Use Offers and Promotions

You can add an offer related to your product or service. It could be a discount that is not available on the website or elsewhere. Discount offers act as a trigger for the user to convert. You can improve the chances of a conversion by showcasing the exclusivity of the offer and induce the user to act. Take a look at this example:

Live Chat

Many service businesses use the live chat feature to improve the conversion rate of their landing pages. A live chat feature can help your audience quickly ask questions about your services. They can remove doubts, if any, related to the scope of the service and its pricing. The feature should be used very prudently on the landing page. It should not be very prominent so the page visitors can use it only if they require it.

Call to Action Buttons

Optimizing the design and copy of the call to action buttons is just as important to conversions as the rest of the content on the page. The CTA buttons on your landing page must be prominent and easily visible. You must use color contrast on your CTA buttons to ensure they stand out. The copy on the CTA button must align with the campaign goal. With each campaign, you may have different objectives, such as triggering an eBook download, webinar registration or product signup, etc. The button copy must ask the user to take the relevant action. It must be actionable and should highlight the benefit of the action that would follow.

A/B Testing

Testing your landing pages using an A/B testing tool can be helpful in improving the performance of your landing pages within the campaign period. You can do away with landing pages or landing page elements that are not performing well. A/B tests can help you create variations of your landing pages for each campaign. You can then test each of them for the direction of the communication and also elements like CTAs, headline, color, content and any other such element. Make sure you’re not making any of these A/B testing mistakes.

Make It Look Professional

You need to ensure that your landing page looks professional and trustworthy. The page design must be consistent with your brand guidelines and other campaign elements such as banner ads, website design and social media posts. Add your business contact number and email address for the convenience of users. Make sure that the landing page is not cluttered and the information is presented in the proper flow.

Continue reading %Landing Page Design: 15 Tips for High Conversions%

by Abhishek Talreja via SitePoint

Yarn vs npm: Everything You Need to Know

Yarn is a new JavaScript package manager built by Facebook, Google, Exponent and Tilde. As can be read in the official announcement, its purpose is to solve a handful of problems that these teams faced with npm, namely:

• installing packages wasn't fast/consistent enough, and
• there were security concerns, as npm allows packages to run code on installation.

But, don't be alarmed! This is not an attempt to replace npm completely. Yarn is only a new CLI client that fetches modules from the npm registry. Nothing about the registry itself will change — you'll still be able to fetch and publish packages as normal.

Should everyone jump aboard the Yarn hype train now? Chances are you never encountered these problems with npm. In this article, we're going to compare npm and Yarn, so you can decide which is best for you.

Yarn vs npm: Functional Differences

At a first glance Yarn and npm appear similar. As we peek under the hood though, we realize what makes Yarn different.

The yarn.lock File

In package.json, the file where both npm as Yarn keep track of the project's dependencies, version numbers aren't always exact. Instead, you can define a range of versions. This way you can choose a specific major and minor version of a package, but allow npm to install the latest patch that might fix some bugs.

In an ideal world of semantic versioning, patched releases won't include any breaking changes. This, unfortunately, is not always true. The strategy employed by npm may result into two machines with the same package.json file, having different versions of a package installed, possibly introducing bugs.

To avoid package version mis-matches, an exact installed version is pinned down in a lock file. Every time a module is added, Yarn creates (or updates) a yarn.lock file. This way you can guarantee another machine installs the exact same package, while still having a range of allowed versions defined in package.json.

In npm, the npm shrinkwrap command generates a lock file as well, and npm install reads that file before reading package.json, much like how Yarn reads yarn.lock first. The difference here is that Yarn always updates yarn.lock automatically, where npm requires you to maintain it.

1. yarn.lock documentation
2. npm shrinkwrap documentation

Continue reading %Yarn vs npm: Everything You Need to Know%

by Tim Severien via SitePoint

This Week's HTML5, CSS and Browser Tech News #262

Read this e-mail on the Web FrontEnd Focus formerly HTML5 Weekly What's New For Developers in Chrome 54 Google Developers Chrome 54, now on the stable release channel, includes support for Custom Elements v1, the BroadcastChannel API, and an origin trial of foreign fetch. Progressive Enhancement Isn’t Dead, But It Smells Funny Nolan Lawson Nolan argues that the ‘HTML-first’ approach to progressive enhancement (i.e. without JS) fits a narrow view that may no longer be applicable to the modern web. Polymer Summit 2016: Recordings of All Talks Now Available Google Catch up now on Polymer Summit 2016, including a look at how to upgrade to Polymer 2.0, an under the hood look at Polymer 2.0, and a fun live coding demo (yes, this is a fantastic session). Updated Workshop: Complete Intro to React (w/Router v4, Jest & more) Frontend Masters  Sponsored Brian Holt (Netflix) introduces you to React plus surrounding ecosystem including: Redux, React Router v4, Jest for testing, Webpack 2, Yarn and more. Hyperform: Capture Form Validation Back From The Browser Kinetiqa A JavaScript implementation of the full HTML5 form validation and constraints API that replaces or polyfills the browser’s native methods. How the Web Became Unreadable Kevin Marks “We should be able to build a baseline structure of text in a way that works for most users, regardless of their eyesight. So, as a physicist by training, I started looking for something measurable.” 11 Interesting Web Browsers (That Aren't Chrome) Chris Brandrick A quick look at some less popular browsers with unique approaches, such as Brave, Ulli, and Blisk. Measuring The Impact of Autofill on Your Forms Paul Kinlan How to detect when a browser ‘autocomplete’ occurs so that the impact of autofill on forms can be measured. Paul argues that autocomplete is a net-positive for users and businesses. Building a Website Performance Monitor CSS Tricks How Eduardo Bouças built SpeedTracker, an open-source service that runs on top of WebPageTest to build up and visualize web page performance metrics over time. Jobs Senior Web Developer (Minnesota, USA)We're seeking a dev who loves creating polished web experiences. The right candidate needs the skills to create smooth animations, and an ability to make artistic decisions, turning static designs into interactive interfaces. Plaudit Find Your Perfect Fit - Try HiredFinding the right role can be daunting, but not on Hired. Get empowered to find the right role with multiple job offers and free personalized support. Hired In brief Introducing Chrome Canary for Android news  Google Chrome Dev Summit 2016 news Chrome Dev Summit 2016 will take place at the SFJAZZ Center in San Francisco, CA on November 10-11. Join Chrome VP Darin Fisher for two full days of announcements and talks from the Chrome team. Register now with code FRONTENDFOCUS  Google Inc. SPONSOR How To Build Honest UIs And Help Users Make Better Decisions tutorial  Smashing Magazine How to Read Web Specs Part I – Or: WebVR, How Do You Work? tutorial A look at the WebVR API spec in its current form, and how to navigate and “parse” it for yourself.  Surma A Pure CSS Content Filter tutorial  Harry Roberts Change The Styles on Autocompleted Fields in WebKit Browsers tutorial Use the -webkit-autofill pseudo-selector to target those fields and style them.  Geoff Graham Introduction to SVG Animation tutorial Why animating SVG is different from animating in CSS, and some hiccups you might experience.  Sarah Drasner Magic Randomisation in CSS with nth-child and Cicada Principle tutorial  Charlotte Jackson How Different Types of HTML Form Fields Handle Invalid Values tutorial  Raymond Camden SVG and Media Queries tutorial One of the great things about SVG is you can use media queries to add responsiveness to images  Jake Archibald Understanding the SVG viewBox tutorial  Dudley Storey How to Make HTML Disappear Completely tutorial How to make HTML elements invisible by hiding them, making them transparent, or moving them off screen.  Quincy Larson Autodeploying Angular Applications to AWS OpsWorks tutorial Amazon OpsWorks is an excellent, low-cost option for Platform-as-a-Service hosting. Follow these step-by-step instructions.  Corgibytes SPONSOR The CSS 'quotes' Property video Not often seen or used, but useful nonetheless.  Guy Routledge Laying Out The Future with Grid and Flexbox video 25 minutes.  Rachel Andrew Dos and Don'ts on Designing for Accessibility opinion A handy set of posters you could print out for your office.  Karwai Pun Current State of HTML5 Game Development in 2016 opinion  Andrzej Mazur 8 Simple Rules for a Robust, Scalable CSS Architecture opinion  Jarno Rantanen 14 SVG Charting Libraries tools  Chris Coyier Swip: A Library to Create Multi Device Experiments tools Expand canvases or active Web page space across multiple device screens placed next to each other.  Paul Sonnentag Pure CSS Minesweeper in Fewer than 400 Lines of Sass demo  Bali Balo Meshi the CSS Dog: A Cute CSS Only Animation on Codepen demo  David Khourshid Curated by Peter Cooper and published by Cooper Press. Unsubscribe : Change email address : Read this issue on the Web Published by Cooper Press Ltd. Fairfield Enterprise Centre, Louth, LN11 0LS, UK

by via FrontEnd Focus

Google Algorithms Explained, Pt. 2: Provide Better Answers

This article is part of an SEO series from WooRank. Thank you for supporting the partners who make SitePoint possible.

In our previous article we went over two of Google’s algorithm updates designed to catch people trying to manipulate search rankings and deter others from trying the same schemes. With this article we’ll cover slightly friendlier ground with some of the more recent algorithms and updates designed to improve Google’s understanding of language, search intent and the best way to meet its users’ needs through the search results.

Hummingbird

What Is It?

The September 2013 debut of Hummingbird has been one of Google’s most significant algorithm changes to date. Google gave the algorithm its name because it’s supposed to be "precise and fast," delivering what people are looking for as quickly as possible. In other words, Hummingbird figures out what people are actually trying to achieve with their search, and then delivers them results that helps them reach that goal in as few steps as possible.

The reason Hummingbird is seen as a much more significant change compared to other algorithms is that it was actually an overhaul of the entire search algorithm, and not just tweaks to parts or add-ons like the others. Probably the most popular explanation is a comparison to a car engine: Panda, Penguin and the algorithms we’ll talk about in this article were like upgrading specific parts of an engine such spark plugs or the fuel injector. Hummingbird was like putting in a whole new engine. An engine that was able to parse the semantics of conversational language to determine the reason someone was searching the web in the first place.

What Does It Mean for SEO?

Hummingbird caused a rather fundamental, if unfortunately vague, shift in the approach to SEO: Answer users’ questions. Keyword research and traditional on page optimizations like title tags and <H1> tags are still very important, and your page content should still make use of your target keywords. What this algorithm really changed was shifting the focus from optimizing around keywords to optimizing around users and topical relevance. Take a step back from your keywords and ask yourself "What is my audience looking for when they use a search engine? What information do they need or problem do they have?" Then, build your pages around answering their question or solving their problem.

From a practical perspective, the biggest change to SEO was for keyword research and content optimization:

• Keyword research: Develop a keyword strategy based around questions your audience asks in order to solve their problems. A good place to start is your own customers by tracking questions received by your customer support team or sent via email and contact forms. Then, do keyword research to find the actual queries used to ask those questions. Long-tail keywords will likely be a big part of your keyword strategy.
• Content optimization: This may be easier said than done, but content should now be structured around answering users’ questions and providing them with solutions. Don’t just track traffic and website ranking when looking at your analytics. Look at bounce rate, time on page and, if possible, use a heat map like Crazy Egg to measure user engagement. These are important metrics Google uses to judge the relevance of your page to a topic and whether or not you’re giving its users a quality experience.

Pigeon

What Is It?

Released in June 2014, the Pigeon algorithm aimed to improve Google’s local search results. It did this in a few ways:

• Search results for web search and Google map search are now better connected, so you should see more similar results across platforms.
• Local search ranking signals are now more aligned with traditional results.
• Review sites and local directories got a boost in search results. Yelp is the most prominent site that benefited from this, but it also helped sites such as Urbanspoon, OpenTable, TripAdvisor, Zaga, etc.
• It better integrates location and distance parameters, so users can search for locations within their informal neighborhoods and get more accurate results.
• Hyperlocal is now the new local. That means Pigeon puts more weight for keywords, citations and Google+ profiles that specify neighborhoods instead of cities, states or regions.

What Does It Mean for SEO?

One of the major changes for the local search results was the reduction of the search radius and increased focus on neighborhoods. The reduced radius resulted in an increase in the number of neighborhoods, which means that a site optimized for Cambridge, MA could find itself losing rank because Google is now able to better determine if someone is searching for something in Harvard, Central or Kendall Squares. A site could also lose rank since Pigeon shifted the borders of some neighborhoods around to better reflect their boundaries. A site that ranked well for Harvard Square searches could now actually be considered in the Central Square area, and so lose traffic. So how to deal with these new neighborhoods?

• If you’re in a big city, focus your optimization on neighborhoods, not the city. Use the neighborhood names people actually use and search for — you’ll probably have to do some research for this. If you’re in a smaller city that doesn’t really have neighborhoods, optimize for the city, not region or state.
• Keep your name, address and phone (NAP) information consistent. It’s one of the most important local ranking factors, while incorrect/inconsistent NAP is one of the strongest negative signals.
• When your neighborhood has two different names, either formal or informal, or you’re right on the border of two, which should you target? Both.

Pigeon has also impacted the way you should do off page SEO for local search. While local citations are still very important for local search, the directories you’re listed in are just as important. How do you know which directories are important? Search for your niche in your neighborhood, and make a note of the directories that make it to the first page. Here’s the SERP for "best burger mountain view ca" below the local pack:

Seven of the top eight results are Yelp, while the eighth is Trip Advisor. If you’re a burger place in Mountain View, CA, you’d better have a business citation on Yelp and Trip Advisor. While Yelp is the most important local directory now, it’s not the only one. Some other important sites, depending on locale and niche, are:

Continue reading %Google Algorithms Explained, Pt. 2: Provide Better Answers%

by Sam Gooch via SitePoint

Distpicker – jQuery Plugin for Picking Provinces, Cities and Districts of China

Distpicker is a simple jQuery plugin for picking provinces, cities and districts of China.

by via jQuery-Plugins.net RSS Feed