alt-text Add alt text to background image on 7.1

Site URL: https://www.ruthgaunt.co.uk

Hey, does anyone know how to add alt text to a background image on Squarespace 7.1?

On 7/15/2021 at 7:30 PM, ruthgaunt said:

Site URL: https://www.ruthgaunt.co.uk

Hey, does anyone know how to add alt text to a background image on Squarespace 7.1?

Hi. You mean top banner image?

Add this to Settings > Avanced > Code Injection > Footer

<script>
$(document).ready(function() {
	$('[data-section-id="60c0ea43ee0b2951f6f8ca78"] .section-background img').attr('alt','enter alt text here');
});
</script>

hey tuanphan,

does this work generically? ive tried your suggestion above to no avail.

im wondering what the solution is. Even if I can just for now get a script to add to just change all background images to one Alt Text. at least it clears my problem for now.

23 hours ago, ChargedCCTV said:

hey tuanphan,

does this work generically? ive tried your suggestion above to no avail.

 

im wondering what the solution is. Even if I can just for now get a script to add to just change all background images to one Alt Text. at least it clears my problem for now.

That code missing jquery library link (because above site already installed it). If your site haven't installed jquery, use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('[data-section-id="60c0ea43ee0b2951f6f8ca78"] .section-background img').attr('alt','enter alt text here');
});
</script>

Replace data-section-id with new id

Use this tool to find id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

I have a question about this too - How does the alt text appear in the site code? Do search engines know which image the alt text is associated with?

Thank you.

11 hours ago, accessduo said:

I have a question about this too - How does the alt text appear in the site code? Do search engines know which image the alt text is associated with?

Thank you.

In site code, it will have an attribute attr="..." something like this

Hi tuanphan,

Thank you for your reply. I didn't word my question properly - what I meant to say was: Since the jQuery script that you provided goes in the footer, the alt text also appears in the footer. So the alt text is not an attribute of the <img> tag. How, then, does the search engine bot know which image the alt text is associated with?

Thank you. 

On 10/9/2023 at 3:34 AM, accessduo said:

Hi tuanphan,

Thank you for your reply. I didn't word my question properly - what I meant to say was: Since the jQuery script that you provided goes in the footer, the alt text also appears in the footer. So the alt text is not an attribute of the <img> tag. How, then, does the search engine bot know which image the alt text is associated with?

Thank you. 

The Footer here is different from the Site Footer. The code inserted here does not mean it appears in the Footer, but it will appear in the position the code affects. (Here is the section containing images)

On 10/12/2023 at 4:22 AM, tuanphan said:

(Here is the section containing images)

Thanks. Where in the section can I add the code? When I click "Edit Section," there are only three choices, Format, Background and Colors.

Thanks!

On 10/19/2023 at 11:50 PM, accessduo said:

Thanks. Where in the section can I add the code? When I click "Edit Section," there are only three choices, Format, Background and Colors.

Thanks!

Website Tools (under Not Linked/Main Navigation) > Click Code Injection > Footer

Website Tools - Code Injection - Footer goes to the Site Footer. 

Thanks, tuanphan!