SEO crawlers (and Ibuprofen) are extremely useful in helping you fix hreflang and other internationalization issues at scale. But sometimes, it’s practical to delve deep into the complexities of hreflang by manually pulling up a page in your browser and inspecting the code with your own eyes.
And this is where the ‘Hreflang Detector’ comes in.
I’ve created this app-like bookmarklet to streamline the diagnosis of hreflang issues for my client’s international website, which spans 60 markets.
Around 7700 characters of minified JavaScript code later, and after almost exhausting Google Chrome’s bookmark limits (I didn’t know there was one until now), I’m proud to share my “little” app with the world. I hope you find it useful in your day-to-day international SEO work.
Get the bookmarklet
Drag the ‘Hreflang Detector’ bookmarklet link below to your browser’s bookmarks bar (or your preferred bookmark location).
How does the bookmarklet work?
Open the bookmarklet on any page, and a new tab will immediately open to show you helpful hreflang information. Let’s take a look.
Total number of hreflang URLs
This one is self-explanatory. The bookmarklet will count the total number of hreflang references so you don’t have to do so manually or use the browser search function.
Existing page URL
The bookmarklet will display the current page URL. After all, the information is viewed in a different tab, and sometimes, having a reference to your current page URL is useful.
HTML language code
The HTML language code is extracted from the page’s <html> attribute. Use the HTML language code to easily spot incorrect language references that may clash with the hreflang annotations or other international signals. Although not part of the hreflang series, it helps catch those subtle discrepancies.
Canonical status
Canonicalized pages should not contain hreflang annotations. The canonical status will show the ‘Self-referencing’ status in green and ‘Canonicalized’ or ‘Canonical not found’ statuses in red.
Multiple hreflang entries
The bookmarklet’s logic will inspect the hreflang annotations and flag any duplicate entries. The status will only show up when an issue is found. Otherwise, it remains inactive.
If multiple entries are found, an HTML table will appear, showing you the list of incorrect URLs and their hreflang language-region code.
Self-Declared reference
The bookmarklet will check whether the current page URL is included in the hreflang series. The ‘Self Declaration’ status will show green if ‘Found’ and red if ‘Missing’.
Language codes
The bookmarklet will check for invalid language codes based on the ISO-639-1 language code list. The status will show the word ‘Valid’ in green if no errors are found.
If invalid language codes are found, an HTML table will show any URL containing an incorrect hreflang language attribute.
Country codes
The bookmarklet will check for invalid country codes based on a predefined list of supported hreflang country codes stored in a JavaScript array. The status will show the word ‘Valid’ in green if no errors are found.
If invalid country codes are found, an HTML table will show any URLs and their incorrect hreflang country attribute.
X-default
Is an x-default reference found within the hreflang series? If so, the ‘X-default reference’ status will show green if ‘Found’. If not, it will show the word ‘Missing’ in red.
Google recommends having an x-default reference; however, it is optional.
Hreflang reference table
The hreflang annotations are extracted from the source HTML and presented as a table. The URL is shown in the first column and the Hreflang language and/or region attributes in the second.
Download CSV
A ‘Download CSV’ link is available to automatically download the hreflang HTML table for Excel, Google Sheets, or other apps.
No hreflang URLs found
If you click on the bookmarklet and no hreflang references are detected, the default Google Chrome alert box will display the message ‘No hreflang URLs found’.
What the bookmarklet doesn’t do!
The bookmarklet can only interact with the code of your existing browser tab. As a result, the bookmarklet won’t report on common hreflang issues such as:
- Pages missing reciprocal tags.
- Hreflang tags that reference redirected or broken pages.
- Hreflang tags that point to a non-canonical URLs.
You will still have to rely on other tools, such as SEO crawlers or Chrome extensions, to identify those hreflang issues.
Instead, the bookmarklet is a nice addition to your standard tooling and is incredibly useful for quick spot-check analysis. It’s just one more tool for your international SEO toolbox.
Disclaimer
I’ve tested the code extensively, but you might still find some bugs or anomalies. If you do, feel free to report errors by using the website’s contact form or reach out to me on LinkedIn.
Alternatively, you can view the minified and unminified code on the following GitHub repository: Hreflang Detector. Feel free to make it your own or expand the code in new ways.
Lastly, you can also get in touch to provide feedback or say hello. I would love to hear from you if you found this extension useful.