Hreflang Detector SEO Bookmarklet

https://github.com/ziggyshtrosberg/hreflang-detector
Admin
Hreflang Detector is an on-page SEO bookmarklet tool that diagnoses hreflang issues by validating...
Tokens:3,836
Snippets:26
Trust Score:2.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install the Hreflang Detector Bookmarklet

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Instructions for creating the bookmarklet by adding a new browser bookmark with the minified JavaScript code as the URL.

```javascript
// Copy the contents of Hreflang-Detector-Bookmarklet-Minified.js
// Create a new bookmark in your browser
// Paste the code (starting with "javascript:") as the bookmark URL
// Name the bookmark "Hreflang Detector"

// The minified code starts with:
javascript:(function(){let links=document.querySelectorAll('link[rel="alternate"][hreflang]')...
```

--------------------------------

### Export to CSV

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Generates a downloadable CSV file containing extracted hreflang URLs and their language-region codes.

```javascript
// CSV generation and download
let csvContent = 'URL,hreflang\n';
urls.forEach(item => {
    csvContent += `${item.url},${item.hreflang}\n`;
});

let downloadButton = document.createElement('a');
downloadButton.textContent = 'Download CSV';
downloadButton.setAttribute('href',
    `data:text/csv;charset=utf-8,${encodeURIComponent(csvContent)}`);
downloadButton.setAttribute('download', 'hreflang_urls.csv');
newTab.document.body.appendChild(downloadButton);
```

--------------------------------

### Check X-Default Reference

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Checks for the presence of the x-default hreflang attribute to ensure proper fallback configuration.

```javascript
// X-default detection
let hasDefaultHreflang = Array.from(links).some(link => {
    let hreflang = link.getAttribute('hreflang');
    return hreflang === 'x-default';
});
```

--------------------------------

### Check Canonical Status

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Determines the indexability status of the current page by comparing the canonical URL with the current page URL.

```APIDOC
## Check Canonical Status

### Description
Determines the indexability status of the current page by comparing the canonical URL with the current page URL. This helps identify whether hreflang tags are on a canonicalized page.

### Response
- **indexableStatus** (string) - Returns one of the following statuses: 'Self-referencing', 'Canonicalized', or 'No canonical found'.
```

--------------------------------

### Check Self-Declaration

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Verifies that the current page includes itself in its hreflang annotations, handling trailing slash variations.

```javascript
// Self-declaration check with trailing slash normalization
let selfDeclaration = '';

urls.forEach(item => {
    let currentUrl = window.location.href;
    let currentUrlWithoutSlash = currentUrl.endsWith('/')
        ? currentUrl.slice(0, -1) : currentUrl;
    let itemUrlWithoutSlash = item.url.endsWith('/')
        ? item.url.slice(0, -1) : item.url;

    // Check both exact match and normalized (without trailing slash) match
    if (item.url === currentUrl || itemUrlWithoutSlash === currentUrlWithoutSlash) {
        selfDeclaration = 'Found';
    }
});

if (selfDeclaration === '') {
    selfDeclaration = 'Missing';  // Error - page doesn't reference itself
}
```

--------------------------------

### Detect Duplicate Hreflang Entries

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Identifies multiple hreflang entries sharing the same language-region code using a Map to track occurrences.

```javascript
// The bookmarklet detects duplicates using a Map
let hreflangMap = new Map();
let multipleHreflangs = [];

urls.forEach(item => {
    let hreflang = item.hreflang;
    if (hreflangMap.has(hreflang)) {
        // Duplicate found - same hreflang value used multiple times
        multipleHreflangs.push({
            url: item.url,
            hreflang: hreflang
        });
    } else {
        hreflangMap.set(hreflang, true);
    }
});
```

--------------------------------

### Check Canonical Status

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Compares the page's canonical URL against the current window location to determine indexability. It normalizes trailing slashes to ensure accurate comparison.

```javascript
// The bookmarklet checks canonical status automatically
let canonical = document.querySelector('link[rel="canonical"]');
let indexableStatus = '';

if (canonical) {
    let canonicalHref = canonical.getAttribute('href');
    let currentUrl = window.location.href;

    // Normalize trailing slashes for comparison
    let currentUrlWithoutSlash = currentUrl.endsWith('/')
        ? currentUrl.slice(0, -1) : currentUrl;
    let canonicalHrefWithoutSlash = canonicalHref.endsWith('/')
        ? canonicalHref.slice(0, -1) : canonicalHref;

    if (canonicalHref === currentUrl ||
        canonicalHrefWithoutSlash === currentUrlWithoutSlash) {
        indexableStatus = 'Self-referencing';  // Good - page is indexable
    } else {
        indexableStatus = 'Canonicalized';     // Warning - page points elsewhere
    }
} else {
    indexableStatus = 'No canonical found';    // Warning - missing canonical
}

// Output shows color-coded status:
// - Green "Self-referencing": Canonical matches current URL (good)
// - Red "Canonicalized": Page canonicalizes to different URL (potential issue)
// - Red "No canonical found": Missing canonical tag (potential issue)
```

--------------------------------

### Validate Language Codes with isValidHreflang

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Checks a given hreflang string against a list of valid ISO 639-1 language codes and script variants.

```javascript
function isValidHreflang(hreflangValue) {
    let validLanguageCodes = [
        "aa", "ab", "ae", "af", "ak", "am", "an", "ar", "as", "av", "ay", "az",
        "ba", "be", "bg", "bh", "bi", "bm", "bn", "bo", "br", "bs", "ca", "ce",
        "ch", "co", "cr", "cs", "cu", "cv", "cy", "da", "de", "dv", "dz", "ee",
        "el", "en", "eo", "es", "et", "eu", "fa", "ff", "fi", "fj", "fo", "fr",
        "fy", "ga", "gd", "gl", "gn", "gu", "gv", "ha", "he", "hi", "ho", "hr",
        "ht", "hu", "hy", "hz", "ia", "id", "ie", "ig", "ii", "ik", "io", "is",
        "it", "iu", "ja", "jv", "ka", "kg", "ki", "kj", "kk", "kl", "km", "kn",
        "ko", "kr", "ks", "ku", "kv", "kw", "ky", "la", "lb", "lg", "li", "ln",
        "lo", "lt", "lu", "lv", "mg", "mh", "mi", "mk", "ml", "mn", "mr", "ms",
        "mt", "my", "na", "nb", "nd", "ne", "ng", "nl", "nn", "no", "nr", "nv",
        "ny", "oc", "oj", "om", "or", "os", "pa", "pi", "pl", "ps", "pt", "qu",
        "rm", "rn", "ro", "ru", "rw", "sa", "sc", "sd", "se", "sg", "si", "sk",
        "sl", "sm", "sn", "so", "sq", "sr", "ss", "st", "su", "sv", "sw", "ta",
        "te", "tg", "th", "ti", "tk", "tl", "tn", "to", "tr", "ts", "tt", "tw",
        "ty", "ug", "uk", "ur", "uz", "ve", "vi", "vo", "wa", "wo", "xh", "yi",
        "yo", "za", "zh", "zu", "hans", "hant"
    ];
    return validLanguageCodes.includes(hreflangValue.split('-')[0].toLowerCase());
}

// Usage examples:
isValidHreflang("en");       // true - English
isValidHreflang("en-US");    // true - English (language part "en" is valid)
isValidHreflang("de-DE");    // true - German
isValidHreflang("zh-hans");  // true - Chinese Simplified
isValidHreflang("xx");       // false - Invalid language code
isValidHreflang("xyz-US");   // false - Invalid language code
```

--------------------------------

### Extract Hreflang URLs from DOM

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Queries the document for all alternate link elements and maps them into an array of objects containing the URL and hreflang attribute.

```javascript
// The bookmarklet queries the DOM for all hreflang link elements
let links = document.querySelectorAll('link[rel="alternate"][hreflang]');
let urls = Array.from(links).map(link => ({
    url: link.getAttribute("href"),
    hreflang: link.getAttribute("hreflang")
}));

// Example page HTML being analyzed:
// <link rel="alternate" hreflang="en" href="https://example.com/en/" />
// <link rel="alternate" hreflang="es" href="https://example.com/es/" />
// <link rel="alternate" hreflang="de-DE" href="https://example.com/de/" />
// <link rel="alternate" hreflang="x-default" href="https://example.com/" />

// Results in:
// [
//   { url: "https://example.com/en/", hreflang: "en" },
//   { url: "https://example.com/es/", hreflang: "es" },
//   { url: "https://example.com/de/", hreflang: "de-DE" },
//   { url: "https://example.com/", hreflang: "x-default" }
// ]
```

--------------------------------

### isValidCountryCode

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Validates the country/region portion of hreflang tags against ISO 3166-1 alpha-2 country codes.

```APIDOC
## isValidCountryCode

### Description
Validates the country/region portion of hreflang tags against ISO 3166-1 alpha-2 country codes. This function checks the second part of hyphenated hreflang values to ensure proper geographic targeting.

### Parameters
- **countryCode** (string) - Required - The 2-letter country code to validate.

### Response
- **boolean** - Returns true if the code is valid, false otherwise.
```

--------------------------------

### Validate Country Codes (isValidCountryCode)

Source: https://context7.com/ziggyshtrosberg/hreflang-detector/llms.txt

Checks if a given string matches a valid ISO 3166-1 alpha-2 country code. The function is case-insensitive and includes specific script codes like HANS and HANT.

```javascript
function isValidCountryCode(countryCode) {
    let validCountryCodes = [
        "AF", "AX", "AL", "DZ", "AS", "AD", "AO", "AI", "AQ", "AG", "AR", "AM",
        "AW", "AU", "AT", "AZ", "BS", "BH", "BD", "BB", "BY", "BE", "BZ", "BJ",
        "BM", "BT", "BO", "BQ", "BA", "BW", "BV", "BR", "IO", "BN", "BG", "BF",
        "BI", "KH", "CM", "CA", "CV", "KY", "CF", "TD", "CL", "CN", "CX", "CC",
        "CO", "KM", "CG", "CD", "CK", "CR", "CI", "HR", "CU", "CW", "CY", "CZ",
        "DK", "DJ", "DM", "DO", "EC", "EG", "SV", "GQ", "ER", "EE", "ET", "FK",
        "FO", "FJ", "FI", "FR", "GF", "PF", "TF", "GA", "GM", "GE", "DE", "GH",
        "GI", "GR", "GL", "GD", "GP", "GU", "GT", "GG", "GN", "GW", "GY", "HT",
        "HM", "VA", "HN", "HK", "HU", "IS", "IN", "ID", "IR", "IQ", "IE", "IM",
        "IL", "IT", "JM", "JP", "JE", "JO", "KZ", "KE", "KI", "KP", "KR", "KW",
        "KG", "LA", "LV", "LB", "LS", "LR", "LY", "LI", "LT", "LU", "MO", "MK",
        "MG", "MW", "MY", "MV", "ML", "MT", "MH", "MQ", "MR", "MU", "YT", "MX",
        "FM", "MD", "MC", "MN", "ME", "MS", "MA", "MZ", "MM", "NA", "NR", "NP",
        "NL", "NC", "NZ", "NI", "NE", "NG", "NU", "NF", "MP", "NO", "OM", "PK",
        "PW", "PS", "PA", "PG", "PY", "PE", "PH", "PN", "PL", "PT", "PR", "QA",
        "RE", "RO", "RU", "RW", "BL", "SH", "KN", "LC", "MF", "PM", "VC", "WS",
        "SM", "ST", "SA", "SN", "RS", "SC", "SL", "SG", "SX", "SK", "SI", "SB",
        "SO", "ZA", "GS", "SS", "ES", "LK", "SD", "SR", "SJ", "SZ", "SE", "CH",
        "SY", "TW", "TJ", "TZ", "TH", "TL", "TG", "TK", "TO", "TT", "TN", "TR",
        "TM", "TC", "TV", "UG", "UA", "AE", "GB", "US", "UM", "UY", "UZ", "VU",
        "VE", "VN", "VG", "VI", "WF", "EH", "YE", "ZM", "ZW", "HANS", "HANT"
    ];
    return validCountryCodes.includes(countryCode.toUpperCase());
}

// Usage examples:
isValidCountryCode("US");    // true - United States
isValidCountryCode("GB");    // true - United Kingdom
isValidCountryCode("DE");    // true - Germany
isValidCountryCode("HANS");  // true - Simplified Chinese script
isValidCountryCode("XX");    // false - Invalid country code
isValidCountryCode("USA");   // false - Must be 2-letter code
```
Tokens:
Raw