How to Make Squarespace Accordions Indexable by Google

Squarespace Accordions Are Not Indexable by Google – Here’s a Fix

Squarespace’s default accordion blocks look great, but they come with a major flaw: Google can’t index the hidden content. This can hurt your SEO, making important content invisible to search engines.

The reason? Squarespace’s accordion blocks lack proper ARIA attributes and keyboard navigation, meaning Google and screen readers don’t always recognize the collapsed content.

How to Fix It

To make Squarespace’s accordion blocks SEO-friendly and accessible, you can add this JavaScript snippet to your Footer Code Injection:

---

<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.sqs-block-accordion .sqs-accordion-item').forEach((item, index) => {
        let button = item.querySelector('.sqs-accordion-item-title');
        let content = item.querySelector('.sqs-accordion-item-content');

        // Assign unique IDs for ARIA relationships
        let contentId = `accordion-content-${index}`;
        button.setAttribute("id", `accordion-button-${index}");
        button.setAttribute("role", "button");
        button.setAttribute("aria-expanded", "false");
        button.setAttribute("aria-controls", contentId);
        button.setAttribute("tabindex", "0");
        content.setAttribute("id", contentId);
        content.setAttribute("aria-hidden", "true");

        // Click event to toggle accordion
        button.addEventListener("click", function () {
            let isExpanded = button.getAttribute("aria-expanded") === "true";
            button.setAttribute("aria-expanded", !isExpanded);
            content.setAttribute("aria-hidden", isExpanded);
        });

        // Keyboard navigation (Enter, Space, Arrow keys)
        button.addEventListener("keydown", function (event) {
            let key = event.key;
            if (key === "Enter" || key === " ") {
                event.preventDefault();
                button.click();
            } else if (key === "ArrowDown" || key === "ArrowUp") {
                event.preventDefault();
                let items = document.querySelectorAll('.sqs-accordion-item-title');
                let newIndex = key === "ArrowDown" ? index + 1 : index - 1;
                if (items[newIndex]) {
                    items[newIndex].focus();
                }
            }
        });
    });
});
</script>

---

Why This Works

✔ Google can now index accordion content because it remains in the HTML. ✔ ARIA attributes improve accessibility, making the content readable by screen readers. ✔ Keyboard navigation support enhances usability (Enter, Space, Arrow keys). ✔ You can still edit accordions using Squarespace’s GUI—no extra coding needed.

No More Manual HTML Editing

I spent months trying to find a workaround, adding tons of custom code that worked but made Squarespace’s accordion editor unusable. That meant wasting time manually formatting everything in HTML like it was 2008.

With this solution, just paste the code into the footer section in Code Injection, and that’s it—no extra steps needed.

Next Steps

After adding the script, test your site using:

• Google Search Console (Inspect URL → View Indexed Content)

• Google’s Mobile-Friendly Test to confirm visibility

• A screen reader to check accessibility

Now, your Squarespace accordions will be fully indexable by Google while keeping their original functionality. Try it out and boost your SEO today

---

<script>

document.addEventListener("DOMContentLoaded", function () {

document.querySelectorAll('.sqs-block-accordion .sqs-accordion-item').forEach((item, index) => {

let button = item.querySelector('.sqs-accordion-item-title');

let content = item.querySelector('.sqs-accordion-item-content');

// Assign unique IDs for ARIA relationships

let contentId = `accordion-content-${index}`;

button.setAttribute("id", `accordion-button-${index}`);

button.setAttribute("role", "button");

button.setAttribute("aria-expanded", "false");

button.setAttribute("aria-controls", contentId);

button.setAttribute("tabindex", "0");

content.setAttribute("id", contentId);

content.setAttribute("aria-hidden", "true");

// Click event to toggle accordion

button.addEventListener("click", function () {

let isExpanded = button.getAttribute("aria-expanded") === "true";

button.setAttribute("aria-expanded", !isExpanded);

content.setAttribute("aria-hidden", isExpanded);

});

// Keyboard navigation (Enter, Space, Arrow keys)

button.addEventListener("keydown", function (event) {

let key = event.key;

if (key === "Enter" || key === " ") {

event.preventDefault();

button.click();

} else if (key === "ArrowDown" || key === "ArrowUp") {

event.preventDefault();

let items = document.querySelectorAll('.sqs-accordion-item-title');

let newIndex = key === "ArrowDown" ? index + 1 : index - 1;

if (items[newIndex]) {

items[newIndex].focus();

}

}

});

});

});

</script>

---

Why This Works

• Google can now index accordion content because it remains in the HTML.

• ARIA attributes improve accessibility, making the content readable by screen readers.

• Keyboard navigation support enhances usability (Enter, Space, Arrow keys).

• You can still edit accordions using Squarespace’s GUI—no extra coding is needed.

Next Steps

After adding the script, test your site using:

• Google Search Console (Inspect URL → View Indexed Content)

• Google’s Mobile-Friendly Test to Confirm Visibility

• A screen reader to check accessibility

Now, your Squarespace accordions will be fully indexable by Google while keeping their original functionality. Try it out and boost your SEO today!