{"id":1279,"date":"2024-03-05T08:32:34","date_gmt":"2024-03-05T08:32:34","guid":{"rendered":"https:\/\/www.shtros.com\/?p=1279"},"modified":"2024-03-05T08:32:36","modified_gmt":"2024-03-05T08:32:36","slug":"hreflang-detector","status":"publish","type":"post","link":"https:\/\/www.shtros.com\/hreflang-detector\/","title":{"rendered":"Hreflang Detector – the international SEO bookmarklet"},"content":{"rendered":"\n

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\u00a0hreflang<\/strong>\u00a0by manually pulling up a page in your browser and inspecting the code with your own eyes.<\/p>\n\n\n\n

And this is where the ‘Hreflang Detector’ comes in.<\/p>\n\n\n\n

I’ve created this app-like bookmarklet to streamline the diagnosis of hreflang issues for my client’s international website, which spans 60 markets.<\/p>\n\n\n\n

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 \u201clittle\u201d app with the world. I hope you find it useful in your day-to-day international SEO work.<\/p>\n\n\n

\n
\"Hreflang<\/figure><\/div>\n\n\n

Get the bookmarklet<\/h2>\n\n\n\n

Drag the ‘Hreflang Detector’ bookmarklet link below to your browser’s bookmarks bar (or your preferred bookmark location).<\/p>\n\n\n\n

Hreflang Detector<\/a><\/p>\n\n\n\n

How does the bookmarklet work?<\/h2>\n\n\n\n

Open the bookmarklet on any page, and a new tab will immediately open to show you helpful hreflang information. Let’s take a look.<\/p>\n\n\n\n

Total number of hreflang URLs<\/h3>\n\n\n\n

This one is self-explanatory. The bookmarklet will count the total number of hreflang references so you don\u2019t have to do so manually or use the browser search function.<\/p>\n\n\n

\n
\"Total<\/figure><\/div>\n\n\n
<\/div>\n\n\n\n

Existing page URL<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Existing<\/figure>\n\n\n\n
<\/div>\n\n\n\n

HTML language code<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"HTML<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Canonical status<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Canonical<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Multiple hreflang entries<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

If multiple entries are found, an HTML table will appear, showing you the list of incorrect URLs and their hreflang language-region code.<\/p>\n\n\n\n

\"Multiple<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Self-Declared reference<\/h3>\n\n\n\n

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’.<\/p>\n\n\n\n

\"Self<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Language codes<\/h3>\n\n\n\n

The bookmarklet will check for invalid language codes based on the\u00a0ISO-639-1 language code list<\/a>. The status will show the word ‘Valid’ in green if no errors are found.<\/p>\n\n\n\n

If invalid language codes are found, an HTML table will show any URL containing an incorrect hreflang language attribute.<\/p>\n\n\n\n

\"Invalid<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Country codes<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

If invalid country codes are found, an HTML table will show any URLs and their incorrect hreflang country attribute.<\/p>\n\n\n\n

\"Invalid<\/figure>\n\n\n\n
<\/div>\n\n\n\n

X-default<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Google recommends having an x-default reference; however, it is optional.<\/p>\n\n\n\n

\"X-default<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Hreflang reference table<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Hreflang<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Download CSV<\/h3>\n\n\n\n

A ‘Download CSV’ link is available to automatically download the hreflang HTML table for Excel, Google Sheets, or other apps.<\/p>\n\n\n\n

\"Download<\/figure>\n\n\n\n
<\/div>\n\n\n\n

No hreflang URLs found<\/h3>\n\n\n\n

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’.<\/p>\n\n\n\n

\"No<\/figure>\n\n\n\n
<\/div>\n\n\n\n

What the bookmarklet doesn\u2019t do!<\/h2>\n\n\n\n

The bookmarklet can only interact with the code of your existing browser tab. As a result, the bookmarklet won\u2019t report on common hreflang issues such as:<\/p>\n\n\n\n