This is NOT a Languagenut language software review, I’m NOT going to review the actual language services offered to schools etc… This is a review of the languagenut.com websites SEO (search engine optimization).
Since it has geo-targeting relevance (it’s a language site with country specific sections) it’s a good example to check out how to use rel-alternate-hreflang annotation correctly.
Languagenut are working on a new language software system and plan to update the WordPress section of their site (WordPress SEO is my forte) which is why I’m reviewing it’s current search engine optimization.
Makes for a good WordPress SEO lesson for my visitors.
Languagenut Language Programs for Home Schools
That being said as an ex home schooler (we home educated/home schooled our three sons, now adults), Languagenut is the sort of software program/service we’d have used when our kids were young. My wife and I are both from the UK and though we know some very, very basic French and German, neither of us would pass the “tourist language test” in a French/German speaking country: we’d have to point a lot :-)
As home educators we bought a fair number of French, German and Spanish language resources:
- Language books
- Language cassette tapes
- Language videos
- Language software
- Language flashcards
- Language boardgames
None of our home schooled children really got into foreign languages, so it didn’t work :-(
If software programs like Languagenut existed 15+ years ago, we’d have probably tried it: for example Languagenut includes Mandarin which should be taught in more schools! There were options like the Rosetta Stone language programs, but it was prohibitively expensive. I was at the University of Sussex (coincidentally not many miles from where Languagenut’s Brighton offices are) as a mature student studying genetics when we first started home schooling, we survived on a student grant, no chance we could afford a Rosetta Stone language program! We could barely afford the bus fair to Brighton to collect stones on the beach :-)
Looking at Languagenut’s US Home School Language Programs Options/Prices, we’d have tried it out for a year.
There’s also the option of the UK Home School Language Programs Options/Prices.
The home school (home education) market in the UK isn’t as big as the home school market in the US, so guess they aren’t targeting UK home educators per se.
My wife in particular would have gone OTT on the creating custom language programs part of the software (see video). Marie’s an artist, so would have been creating her own custom images for the kids language lessons.
Anyway, to the SEO review :-)
Languagenut Website SEO Review
Some of this SEO review on first reading could be considered quite bad, reality is most websites are poor SEO wise. WordPress theme and plugin developers don’t understand much about SEO beyond title tags and meta tags. Those who create content in WordPress don’t know the basic SEO rules, for example as you’ll read later, don’t add huge images to webpages. All a WordPress user knows is no matter what size their images are (800px wide, 1,000px wide, 2,000px wide…), they always fit on the webpage when they view it in any device.
Google’s PageSpeed Insights Free SEO Tool
My first port of call is to open up Google’s PageSpeed Insights Tool Languagenut.com Results to see what Google thinks.
The Google PageSpeed Insights Tool is a great start for finding basic SEO problems, before it existed you needed an SEO expert (like me ) to find what are quite basic SEO mistakes. Since mobile platforms are the future it’s always a good idea to optimize for mobile first (it’s harder to do).
Languagenut Mobile Responsiveness
Before we look at the Google PageSpeed Insights Tool results in detail you should also check a website out on actual mobile devices. Most of us don’t have multiple mobile devices that will cover ALL mobile device sizes etc…, but we can emulate a mobile device using the browsers FireFox and Google Chrome. Resizing a FireFox/Google Chrome browser window will emulate mobile device sizes: quick and easy for the SEO win :-)
FireFox also has a built in mobile device emulator under “Tools” > “Web Developer” > “Responsive Design Mode”. When in Responsive Design Mode you can see what a webpage will look like in any device size chosen: I really like this browser feature, used to have to use mobile SEO tools to achieve this level of pixel perfect accuracy.
As you can see in the screenshot above the home page of Languagenut looks fine on a mobile device. I also checked a random selection of webpages under different screen sizes and nothing under WordPress (WordPress Posts, Pages, Categories, Tags**) broke under mobile conditions.
** It looks like Categories and Tags have been disabled. For the most part Languagenut are using WordPress as a CMS (Content Management System), rather than a blog per se. I could only find 14 WordPress blog posts under the US version of the blog, Google has indexed them all.
Quick SEO Lesson: The Google Site: Search
Do a Google search for site:URL where URL is a link to a website/webpage and you can see everything indexed under that URL structure. To see everything indexed under a domain (including sub-domains) use this format:
Do this Google search to see all the indexed US blog posts
There’s a further 30 odd under the UK blog version
This led me to the first SEO issue, possible duplicate content, we have some duplicated articles. Example below.
This in itself isn’t an SEO problem, it’s a site selling Language software, there’s going to be sections for different languages that use the same content.
There’s two possible solutions, Canonical URLs (rel-canonical annotation) and Hreflang Tags (Alternate URLs : rel-alternate-hreflang annotation). In this case the best solution is hreflang tags alternate URLs, but will explain both.
What’s a Canonical URL?
Canonical URLs set a preferred URL for Google etc… to index. When two webpages have identical content their canonical URLs should link to the preferred canonical URL.
Current US Languagenut canonical URL:
<link rel="canonical" href="http://www.languagenut.com/us/blog/2016/07/27/the-olympics-language-resources/" />
Current UK Languagenut canonical URL:
<link rel="canonical" href="http://www.languagenut.com/uk/blog/2016/08/02/language-worksheets-for-the-olympics/" />
You would choose which of the two webpages are the preferred URL and link both on the webpages canonical URLs to that one webpage. So if the UK section is the main English speaking blog, use that URL on both webpages.
I don’t like the Yoast WordPress SEO plugin, but it does have the option to change a posts canonical URL. Note to self, add canonical URL overrides to Stallion Responsive 8.5 and steal Yoast SEO database structure :-)
Since Languagenut are probably not trying to deliberatively mislead Google etc.. (some sites use duplicate content to increase traffic), it’s unlikely they’ll be penalized. Overtime Google would choose one and stop showing the other in search results, the problem with leaving it to Google is you can’t control it and more importantly every link costs SEO benefit, if you don’t add canonical URLs to duplicate content you could waste valuable link benefit (that’s why canonical URLs exist).
Interesting SEO Fact: To Google a canonical URL is the equivalent of a 301 redirect (that’s a permanent redirect) and Google probably passes 85% of the link benefit of the pages with canonical URLs to the other webpages (having pages redirect or having canonical URLs can waste around 15% of the link benefit). Without the canonical URL there’s the possibility of the link benefit being completely wasted. I use this function in Stallion Responsive for archive sections of a site, monthly archives have a canonical URL to the home page, on categories, tags and search results I can add canonical URLs (it’s an option) for pages 2, 3, 4… of an archive set to the first page of the archive or to the home page.
Note: There could be a warning about duplicate content under Google Analytics: it’s installed on the Languagenut site.
Canonical URLs would be the solution if the duplicate content wasn’t on different language sections. That brings us to hreflang tags.
What’s an Hreflang Tags Alternate URL?
The hreflang tags alternate URL is specifically for websites with language sections (like Languagenut), when you have webpages that are covering the same content (can be in the same language or same content in a different language), but for specific countries, you set hreflang tags on those URLs.
For example you might offer the same service in two English speaking countries, but the price is different UK is £s, US in $s… On each webpage you set the corresponding alternate URLs. So in our earlier canonical URL examples you could instead set the hreflang tags on both webpages to:
<link rel="alternate" href="http://www.languagenut.com/us/blog/2016/07/27/the-olympics-language-resources/" hreflang="en-us" /> <link rel="alternate" href="http://www.languagenut.com/uk/blog/2016/08/02/language-worksheets-for-the-olympics/" hreflang="en-gb" /> <link rel="alternate" href="http://www.languagenut.com/uk/blog/2016/08/02/language-worksheets-for-the-olympics/" hreflang="x-default" />
The first line is the US version hreflang = en-us, followed by the UK version hreflang = en-gb and the last line is the default (preferred URL) hreflang = x-default.
Google users from the US (US IP address) should be sent to the US URL by Google. UK and other IP addresses will go to the UK article.
Languagenut currently have hreflang tags set for the home page and some other parts of the site (WordPress Pages rather than WordPress Posts I think), BUT the code is broken!
For an hreflang tag to work, two or more pages MUST alternate URL link back (page A links to B and page B links to A: they also link to themselves). So what’s on one, is on all of them. I think Languagenut has done this for the country specific home pages, BUT not for what I’m assuming are WordPress Pages that are not replicated on the various language sections of the site.
The setup should be something like this
<link rel="alternate" href="US-URL" hreflang="en-us" /> <link rel="alternate" href="UK-URL" hreflang="en-gb" /> <link rel="alternate" href="German-URL" hreflang="de-de" /> <link rel="alternate" href="UK-URL" hreflang="x-default" />
Here we have three webpages with the same content (can be in different languages).
US-URL a webpage with US specific content
UK-URL a webpage with UK specific content
German-URL a webpage with German specific content
Languagenut have this setup, BUT many of the URLs don’t exist. For example a page I linked to earlier:
Is the US page about Home Schooling. The hreflang tags alternate URLs point to UK, German, Indian, Spanish…. webpages with the same URL except the /us/ part:
/uk/top-choice/ /ar/top-choice/ /fi/top-choice/ /fr/top-choice/
There’s around 60 of these alternate URLs (see screenshot below of the view source code), the corresponding webpages do not exist. I believe in this scenario the hreflang tags will all be ignored. Google Article: Use hreflang for language and regional URLs.
My guess is they’ve added an automated plugin or hacked some code together that grabs the WordPress Pages permalink. This would work fine, IF they’d duplicated the article (including /url-slug/) 60 times (they haven’t).
I’m afraid this level of language integration requires some manual input as the webpages are created.
In the short term for a small number of WordPress Pages I’d suggest creating a WordPress Page Template for each Page set and manually add the hreflang tags alternate code to each WordPress Page Template (about 5 mins work for each WordPress Page Template required). This way if they did create half a dozen matching webpages to the above article, would be a simple case of edit one php template file to add a new line of code for each page in the set. Not ideal, but a quick fix for WordPress Pages.
Long term I’d suggest developing a feature to add a custom hreflang tags alternate URL set on a page by page basis (under the WordPress Pages and Posts Edit screen). Something as basic as a form box that’s added to all WordPress Pages/Posts where the hreflang tags code can be added and then loaded into the head section of the corresponding webpages. Note to self, add this to Stallion Responsive, would make a nice feature to be able to add custom code to the head of specific webpages.
Looking deeper they do have one set of WordPress Pages sort of setup correctly. On the Languages pages (where you select a country/language) the hreflang tags are set differently to match the corresponding webpages (see screenshot).
Unfortunately, some of them are broken. I know getting these wrong can break the function, but not sure if having a few wrong breaks it all. When I worked as an SEO consultant I didn’t deal with many sites with multiple language sections like this and Google introduced the rel-alternate-hreflang annotation in 2013 after I stopped taking on SEO clients. If anyone knows for sure how broken ones are treated by Google, comment away.
On a pedantic note, personally I’d have gone with the ISO 639-1 format for the URL structure. So for /uk/ I’d have used /en/ or /en-gb/. Even now if I acquired a site with /uk/ rather than /en/ or /en-gb/ I’d change it and 301 redirect the /uk/ webpages to the /en/ or /en-gb/ webpages (it would annoy me otherwise).
When I setup the Stallion Responsive Language Options, I made sure I used the right country format.
And that was for php files that never see the light of day, I’m a bit of an OCD perfectionist :-)
Note to self, create a page by page override feature to set a specific language translation in Stallion Responsive. Be cool to be able to set specific WordPress Pages and Posts to use different language translations. So a page targeted to a German audience would automatically have the “Continue Reading” text in German (Weiterhin Lesen).
Let’s get back to the fun stuff, the Google PageSpeed Insights results.
Google’s PageSpeed Insights Tool Languagenut.com Mobile Results
First the good news, 100/100 on User Experience, can’t score better than that.
What this means is visitors accessing the home page on a mobile device shouldn’t struggle to see the text (the fonts aren’t small), tap targets are a reasonable size (even huge thumbed men can handle it :-)) The viewport is configured correctly, that means the page will resize depending upon device size (basic mobile responsiveness).
The current results for my websites home page is 99/100 on user experience, fails on tap targets: the Facebook Like and Share buttons are too close together, to fix it I’d have to change button types (it’s a Facebook issue, no way to fix) and I specifically use the iFrame version of the Facebook Like/Share code for other SEO reasons.
Sometimes you have to ignore the Google PageSpeed Insights warnings.
Let’s get to the not so good news.
61/100 on Mobile Speed isn’t that great.
Reduce Server Response Time
If a webpage consistently reports the reduce server response time warning it’s something to worry about: if it’s a one off, probably not an issue. Either means your server isn’t configured particularly well and/or the server is struggling with the load (too much traffic for example). Needs further investigation.
Interestingly the website owned by the creator of the Yoast WordPress SEO plugin consistently generates the reduce server response time warning: or did when I wrote Is Yoast the Best WordPress SEO Plugin?
Avoid Landing Page Redirects
You don’t see this very often. When you visit the home page it automatically redirects the user to one of the country specific URLs. Since I have a UK IP, I was redirected to the /uk/ home page.
It looks like the website is set when accessing the index file (/, index.php) it 301 redirects to
And that 302 redirects based on IP, in my case to:
Can confirm this with header checks.
HTTP/HTTPS Header Check on http://www.languagenut.com/ HTTP/1.1 301 Moved Permanently => Date => Mon, 12 Sep 2016 10:36:28 GMT Server => Apache/2.4.7 (Ubuntu) Location => https://ww5.languagenut.com/redirect Content-Length => 328 Connection => close Content-Type => text/html; charset=iso-8859-1
HTTP/HTTPS Header Check on https://ww5.languagenut.com/redirect HTTP/1.1 302 Found => Date => Mon, 12 Sep 2016 10:37:04 GMT Server => Apache/2.4.7 (Ubuntu) X-Powered-By => PHP/5.5.9-1ubuntu4.9 Set-Cookie => redirect_locale=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0 Expires => Thu, 19 Nov 1981 08:52:00 GMT Cache-Control => no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma => no-cache Location => http://www.languagenut.com/us/ Access-Control-Allow-Origin => * Access-Control-Allow-Credentials => true Content-Length => 0 Connection => close Content-Type => text/html
Note the HTTP/HTTPS Header Check website I used (search Google for “Header Check” for loads of free ones) must be located in the US, they have a US IP so the header check 302 redirected to the /us/ webpage.
It should be possible to skip the ‘middleman’ (the /redirect page) and have a single redirect from the /index.php page.
The current setup means effectively there isn’t a home page at / (it 301 redirects out). A better setup would be to have say the /uk/ webpage at / and 302 redirect to the country specific sections.
Let’s have an easy one next.
Optimizing images means reducing their size. In WordPress this is easy, there’s multiple WordPress plugins that do it quite well. I use EWWW Image Optimizer, simple case of going to Plugins > Add New : Search for “EWWW Image Optimizer” and install/activate it.
It’s got a fair number of options, but nothing too difficult, so even the novice webmaster should be able to use it.
Some SEO tips on images.
Image dimensions. I find on a WordPress Post/Page like this one it’s best to limit the width of an image to no wider than 640 pixels. If you go bigger than this you might find Google PageSpeed Insights Tool complains.
In Stallion Responsive I add multiple new image sizes, when I upload a post it automatically creates up to 13 images with various dimensions.
When I upload an image of 1,000+ pixels in width, Stallion Responsive/WordPress creates 13 images sizes: if the image is smaller than 1,000 pixels in width there’s fewer images created (they don’t upscale). When I add the image to a Post or Page via the Add Media button I can choose which dimension to use.
If I uploaded a large image, I’ll tend to show the 640px wide image on the post and have it link to the full image. If the original image is smaller than 640px I tend to just load the full image on the Post/Page and not link to anything (the screenshot above is like that).
The main content area of this webpage in Desktop view is around 640 pixels in width, means the images loaded on the page don’t scale down in Desktop view. If your content area is say 500px wide there’s no reason to have the image shown on the page to be larger than 500px, if you need viewers to see a larger image have it open when the smaller image is clicked (like I do). Whoever is adding images to the Languagenut blog posts isn’t taking the size of the viewable content area into account, see screenshot.
Basically an image with dimensions 1,366px × 768px has been scaled down to 795px × 447px. So what’s shown to visitors is about half the size of what’s loaded. The full image is about 180KB in size, creating a small image could save over half that file size, add to that the file reduction by using EWWW Image Optimizer and it takes a strain off the server: might help get rid of the annoying Reduce Server Response Time warnings.
And to be fair if you check the size of the image (the screenshot) above you’ll find it’s 640px wide, but scaled to 614px because I’ve used the caption option on images. I know what I’m doing and make the mistake myself, though scaling down 26pixels is ignorable: that’s my argument and I’m sticking with it :-) To avoid this I could add another image size of 600px wide for when I use the captions option. Fortunately I have a regenerate images feature built into Stallion Responsive, so can rebuild all the images, plus new ones at the click of a mouse (could have a 600px wide image of all the old images easily).
Leverage Browser Caching
This subject is worthy of an SEO tutorial article in itself, can require multiple server settings to get right or you might be lucky and using a caching plugin like W3 Total Cache can solve it for you (highly recommended SEO plugin).
The screenshot above doesn’t show all the files that Google PageSpeed Insights listed, here’s the full list:
http://www.languagenut.com/assets/media/faces/fingushappy.png (expiration not specified)
http://www.languagenut.com/assets/media/faces/johncousin.png (expiration not specified)
http://www.languagenut.com/assets/media/faces/uncle.png (expiration not specified)
http://www.languagenut.com/assets/media/faces/yazhat.png (expiration not specified)
http://www.languagenut.com/…es/worksheets/sites/108/2015/03/Tick.png (expiration not specified)
http://www.languagenut.com/…s/worksheets/sites/108/2015/03/cross.png (expiration not specified)
http://www.languagenut.com/…heets/sites/130/background-word-left.png (expiration not specified)
http://www.languagenut.com/…es/54/2015/02/Android-App-Store-Grey.jpg (expiration not specified)
http://www.languagenut.com/…/sites/54/2015/02/Windows-Store-Grey.jpg (expiration not specified)
http://www.languagenut.com/…ites/54/2015/02/background-word-ipad.png (expiration not specified)
http://www.languagenut.com/…ites/54/App-stores-Coming-soon-Grey1.jpg (expiration not specified)
http://www.languagenut.com/…esources/worksheets/sites/54/DSC4996.jpg (expiration not specified)
http://www.languagenut.com/…sheets/sites/54/background-word-left.png (expiration not specified)
http://www.languagenut.com/…es/worksheets/sites/56/2015/02/Pixel.png (expiration not specified)
http://www.languagenut.com/…ntent/themes/Divi/js/google_anyaltics.js (expiration not specified)
https://d364rcy7f2us8u.cloudfront.net/Sales site/Other/Languagenut logo.png (expiration not specified)
https://d364rcy7f2us8u.cloudfront.net/Sales site/Other/background-nuts2.png (expiration not specified)
https://d364rcy7f2us8u.cloudfront.net/Sales site/Other/paypal-logo.png (expiration not specified)
http://u.heatmap.it/conf/www.languagenut.com.js (5 minutes)
https://static.doubleclick.net/instream/ad_status.js (15 minutes)
https://platform.twitter.com/widgets.js (30 minutes)
http://static.olark.com/jsclient/loader0.js (45 minutes)
http://u.heatmap.it/log.js (60 minutes)
http://www.google-analytics.com/analytics.js (2 hours)
https://www.google-analytics.com/ga.js (2 hours)
http://static.olark.com/…-bucket1/application2.js?v=1472763845283 (3 hours)
http://static.olark.com/jsclient/jquery.js (3 hours)
http://static.olark.com/…sclient/styles/artsy-albatross/theme.css (3 hours)
https://static.olark.com/…lient-bucket1/storage.js?v=1473266942884 (3 hours)
In brief some file types should have an expiration date of at least 30 days. As you can see above “expiration not specified” means every page load those images are redownloaded!!!! That is a HUGE waste of server resources and should be a top priority to fix. When setup correctly there shouldn’t be any image files from your domain listed.
When set correctly a visitor who visits your site today will cache the images locally to their device, if they revisit within the expiry date (30 days is good for a lot of stuff) they won’t download it again, they’ll use their local cache. A site like Languagenut probably has visitors who return to the site day after day, this could take a huge load off the server: assuming the server problems are due to web traffic and not usage of the language software.
The resources loaded from other domains like Twitter, Heatmap, Google Analytics** etc… there’s no way to change their expiry dates, you have to decide if you want the features associated with those files.
I take the hit on my site from Twitter, Google Analytics and Google AdSense.
** I note there are two js files related to Google Analytics. The ga.js file is the legacy Google Analytics file and should be updated/removed.
Any CSS and JS files that are required to load before the webpage content will show (that’s text and image content) are listed here, unless you have ALL your CSS and JS code inline (not a good idea) you’ll have at least one render blocking CSS file (that’s acceptable). The screenshot above doesn’t show them all, this is the full list:
Optimize CSS Delivery of the following:
That’s quite a lot of CSS files, looking through them four of them look like they’ve been added by WordPress plugins.
I have an interesting theme setup, Stallion Responsive has 12 layouts (one CSS file for each), 26 font schemes (one CSS file for each) and 112 color schemes (one CSS file for each): there’s almost 35,000 different combinations. On an options page I choose the layout, font and color scheme and the three files are loaded (like you see above): note on each WordPress Post/Page edit screen I can override which layout/font/color scheme is used, this article has a different color scheme than the rest of the site.
I use the W3 Total Cache plugins combine feature to combine the three CSS files into one file, I also use the plugins minification feature as well to make it smaller. Rather than loading three render blocking CSS files, I load one. The W3 Total Cache plugin should be able to do the same with the seven CSS files the Languagenut website loads. Only way to find out is try it.
Personally I’d consider dropping some of the social media plugins. The Add To Any one for example adds a hidden link in the code, it’s stealing link benefit and damaging the sites SEO.
The rel=”nofollow” links also delete valuable link benefit, have to be careful with these types of WordPress plugins.
Since I’m at the 4,000 word mark (will probably break this up over multiple posts later), think I’ll wrap this up now :-)
There’s some major oversights in the general SEO of the site (the SEO isn’t very good).
The wrong images are used in the Open Graph meta tags, used for sharing on Facebook etc… so on important pages a PayPal image is used by Facebook etc… when shared.
There’s loads of inline CSS that looks like it might not be needed (don’t think they use Woocommerce, but there’s Woocommerce inline CSS).
Some image filenames use spaces, really shouldn’t do that. Ideally for SEO reasons image filenames would be all lowercase and keyword separated by hyphens like this: languagenut-language-software.jpg and the images would have relevant alt attributes like alt=”Languagenut Language software”.
There’s a couple of ‘hidden’ links in a noscript tag related to the olark.com service. One of them has anchor text “Olark live chat software”, that’s SEO damaging and against Google’s Webmaster Guidelines, remove them.
WordPress should be updated ASAP, currently running WordPress 4.4.5. WordPress is at version 4.6.1. The 4.4.* series was released December 8, 2015. That’s a long time not to update core WordPress and rely on the automated updates. 4.5.* series was released April 12, 2016. 4.6.* series was released August 16, 2016. I manage over 100 domains, they all run WordPress version 4.6.1. Takes a few minutes to upgrade one site and if concerned be sure to backup the virtualserver** before clicking update. If the update fails, reinstate the backup, worst case scenario is a few mins downtime as you log into your control panel to reinstate the backup: I’ve not had a WordPress upgrade issue in over 5 years, that’s hundreds of problem free upgrades.
** Since I own so many WordPress sites I backup the entire servers (I have two) then run the WordPress updates all at once. I use domain mapping versions of WordPress, which means I can upgrade 20+ WordPress sites in one click.
At http://www.languagenut.com/uk/languages/ the blue “Try The Resources” button has a typo.
There’s inconsistencies in how the site links together, in some areas there’s links to a ww5 sub-domain.
I see these sort of issues on plenty of websites, they aren’t unusual, take a look at my Amazon Website Review. Gives an idea how important it is to have a person in charge of a business website that knows a lot about the software that runs the website and a decent amount about SEO. Most people don’t have a clue about half this stuff.
Some of this is covered in my SEO Tutorials.
Definitely going to break this into multiple articles.