SHOWIT ALT TEXT UPDATE: December 2025

Hello.

This video is going to serve two purposes.

One, I'm going to talk about Alt text and SEO and Showit, and two, I am going to show you how to make your Images accessible on ShowIt.

So if you are coming here for the tea on what's happening within images on your website, within Showit, I'm going to talk about that.

But if you are coming here because you already know that and now you just want to jump to actually learning how to make your images accessible, I will put the jump to, number of where to go to within this video so that you can jump to that.

So let's start with, number one, the reason why we're here.

A couple weeks ago, I sent out an email all about Alt text and Showit and how your images are not accessible.

Now, there's a big difference between accessible and indexable, right?

So it was a little confusing as to whether our images were indexable at all.

A few things have came to light and I appreciate so many of you guys.

You guys just blew up my inbox.

Honestly, I couldn't keep up sharing, everything that you've uncovered on your end, the different resources that you have and things that you've reached out to.

So I really appreciate that.

And a few of you, I was digging really deep in to figure out, like, what the heck is going on.

So I am going to share everything we found, what we know of to date, and just give you a little inside information.

And like I said, I am a big fan of sharing this information with you.

I'm not trying to, scare anyone.

Like, at the end of the day, I love Showit.

I think Showit is a great platform.

We wouldn't have built our website on it, nor do would we build client websites on it if I didn't love it.

I love it.

I also just think the transparency and how you need to design specifically to index and rank better for SEO is also very important.

So I'm going to bring you both sides of the conversation and that's the goal.

So let's talk about this.

There were a few things that people have emailed me and sent me, one being images.

This is coming straight from Showit customer service.

So hang with me for a second because it sounds a little bit crazy.

The images are wrapped in span tags, wrapped in divs.

This is all code.

We'll talk about this in a second and I'll show you how this comes to life.

Since it isn't just a div, it can still be crawled so they wouldn't Be not visible to crawlers, meaning your images on Showit can be indexed but they're not accessible.

so I'm going to again talk about this and then a second thing is someone reached out to connection, they have with Davey and Krista.

They obviously are very integrated with the Showit team and shared that it's getting a major refresh to the code on likely on Christmas Day that's going to change the rendering of the HTML.

We don't know if images are going to be included, but you can hang on for that because it's not that far away.

So before the end of the year we can do another little check in and see how things are going.

But for right now I wanted to give you a little update.

So this right here, images can still be indexed.

So let's take a look.

If I Google Duo Collective, are the images on my website showing up on Google?

And the answer is they are.

So it doesn't mean everything is going to show up here.

Right.

So I want to focus on the ones that I have optimized on my website.

So founders of Duo Collective, like this image is living on my website.

You can see it right here.

So if you're on my about page and you scroll down, you can see that image of Courtney.

So this you can see right here.

I want to go ahead and copy the link of the address so that you can kind of see what is being pulled in here.

which is the about page.

So anyway, sorry, I'll show you how to do that in a second.

But anyways, if you copy that, it's going to tell you where that image is.

If you copy the image address that is going to show you the exact image URL that we're looking for.

So because, I'm just going to pull this part of the image because this is what the image is.

the file is within the media library.

So if I go to the source code, so if you go view developer view source and then I'm going to search for it.

So you will see that this image shows up in two different spots.

Spots.

And this is what Showit was talking about is you have this image in two spots of your website, one being where the image is actually located.

And so and then another being to make it accessible.

So you can see that this is like in the rows of the 20s.

and then this one, this is where we can see the span div.

No scripts.

Remember how they said a span div code making it indexable.

And this is where the file name lives, the URL as well as your alt text duo collective female founders Abby and Court.

So you can see how that got pulled in and you can see where this is in the code.

It's in a very different spot.

We're looking at the, you know, bottom of the code, right?

We're looking at 14, 18 in terms of the line of the code, of how far down the page you're going.

So, yes, the image that is indexable, it's not necessarily the image that is living right here, but it is within the code and crawlers can find it.

So this seems a little bit crazy, but that's kind of what I wanted to explain to you.

So the image that you see on the page is not the actual image that Google sees.

Google sees the image within the code, which is going to be likely just deeper within the code.

So yes, they can find it.

Doesn't mean they're finding it in context with what the copy is.

No, because it's not being read in order of where it is on the page.

so Google is using these fallback images and these are the ones that are being indexed.

So again, your images on your website can show up in Google.

Case in point, if you just Google, if you google about your brand, if you google a specific product, if you Google a specific digital course, like, what images are going to show up?

And are you going to see your images here popping up for the certain pages?

So again, I would look at the image or the image address and things like that to kind of see, like, what page is this actually being pulled into, knowing that this one is being pulled from the about page.

So what page is pulling that indexed image?

So this is good to know, right?

Our images are getting indexed.

So images on ShowIt are indexable, not accessible.

So that's where we come back to the accessibility.

So the difference between this is that indexable accessible means robots and crawlers can see your image.

Accessible means that any person, humans, we're talking about humans, not robots, any human can access your image.

And that is what's not happening.

So if someone has low vision, if someone is blind, if someone is, colorblind, so they can only see certain colors on your website, all of these people might be using certain specific plugins to help them actually understand your website better.

And in those cases, those screen readers are not reading your images, because again, the image that is actually readable is not within the right part of the code, if that makes sense.

So just a quick one of the things we did in the last video was I showed you how to update it.

So you can see if I click here, if I right click.

And it's not even showing me that this is an image.

Right?

It's just showing that these are.

I don't.

These are like web pages.

Like, I can save this as a web page.

It's not actually an image, it's just pulling the canvas.

If I go down to the one that I already made embeddable, like I embedded it into the website, you can see that this is.

Even if I right click, it's showing me that it's an image.

So, just right there you can kind of see like, okay, just if I'm navigating my website and right clicking things, I can actually save something, because it's being noted within the code as an image.

So again, this tool that we like to use is called Silktide.

This is accessibility, not index ability.

Is that a word?

So this is going to tell you if something is accessible to humans, not necessarily indexable.

So if I'm using this, I want to see alt text.

Then again, it's going to show me all of the images with alt text.

So these are not being pulled in as images.

So because of that, that's why you're not seeing them show up here.

So, as I scroll down, you can kind of see the different, different sections of the website.

But this one, the alt text is being pulled in because we did that embed code.

whereas nothing else is being pulled in because all of the rest of these aren't actual images at this point within the code.

Okay, hopefully this all made sense.

technically this does not follow Google's required guidelines, which is why it is an issue, which is why Showit is going to fix it.

and if accessibility is a major part of your business and you need your website to be accessible for all humans, which I would argue that all of our websites should be accessible, but it also does depend on the industry you're in, who your clients are, who your audience is.

For some people, it's going to be way more important than for others.

So, for people where it is beyond important for you to have accessibility work right now, like, you can't wait for Showit to make the updates, then let's walk through how you're going to do that for your website.

All right, let's go ahead and start by choosing an image.

So I'm going to choose this one right here that I want to update because I know none of these are being pulled in.

So because I'm choosing this image, I know it's not being pulled into my alt text.

The only things that are being pulled in for alt text on this page are HTML, their embedded code.

that's why things like moving banners, and things like this where you have sliders, effects, all of these are embedded content.

So because of that you will see those show up as alt text.

But anything that is being pulled in with the image is not going to be shown within from accessibility.

So as I go down to this, this is the image that I want to get.

So there's two ways to find the image URL.

One is you can just go to your media library and if you know exactly where the image is then you can go ahead and copy that URL right here.

Two is a little bit more complex.

If you have a crazy media library and which ours is a little crazy and definitely needs to be spend spent some time updating.

But if you have a crazy media library, you don't know how to find that image, you can find it a different way.

So you can do developer inspect elements.

I am going to click on the image that I want, I'm going to take and copy this code and now I'm going to be able to see the exact image URL right here and then let's verify that this image is the actual image and it is.

So now that I know that this is my image, this is the code template that you are going to use so I can delete this.

This is an old image, the image that I showed you an example so I'm going to show you how to do another one.

So I'm going to delete that because I don't need it anymore.

This is my image URL.

I'm going to take my final code, paste it down here.

I'm going to start by taking my image URL and pasting that in this spot right here.

And then I am going to type my alt text.

So alt text for this image.

This is the image here.

This is specific to branding, not websites like it was before.

So I will probably write the alt text as branding for Primal Wellness holistic wellness products.

So that pulls in the reality of the image.

I'm featuring Primal Wellness as a brand.

But what is it?

It is branding and I can even do a branding Style guide or brand assets, something like that.

For again, the keyword kind of being that holistic wellness product.

So if someone's searching for branding for a holistic wellness product or a wellness product or a product business, things like that, that kind of gives you the ability to show up in the Google Images section.

So I'm going to take that, I'm going to paste that here, make sure there's no extra spaces.

and then I'm going to keep the style here.

this style is going to auto adjust.

I could style it to be, you see up here in this section here, it's 400 by 500.

I could go ahead and have it be adjusted exactly to the size I want it.

But I want to make sure that it is responsive for both desktop and mobile.

So this eliminates the ability to have to add a specific embed code for both desktop and mobile.

So I am going to take this and copy this code and then I'm going to go to ShowIt.

So within ShowIt I'm going to go to the spot that I'm on the wrong page.

I'm going to scroll down to the spot where I want to add the image.

So, so here in this section is where I want to put it.

So I'm going to add elements.

I'm going to click embed code, double click into that and here is that image.

You can see the source, the alt, the style, and I'm going to click save.

and I'm going to see it not work.

How I would like to.

I love when things don't work.

And then I can show you.

Okay, So I just did a quick pause to kind of see what was going on.

And the first thing I noticed is that you can see the image I copied over here doesn't have the HTTPs in it.

So I am simply going to update my code to include that URL prefix.

And now I'm going to grab this, paste this in here.

And now, my friends, this is going to work.

So you've got a little free live troubleshooting with you.

Okay?

Embed, double click, paste this section, save, boom.

There you go.

So now what I want to do is make sure that this is fitting the appropriate size that I want it to be.

which the auto is interesting that it's showing this little scroll bar.

So let me.

I love a good lesson in troubleshooting.

So I turned to my trusty old friend chatgpt.

So here's what I did.

I said, every.

I basically just threw it in there.

It's like, can you help me edit this code?

Everything it gave me wasn't working.

And so I had told it that, hey, the reason this isn't working is likely because the image that I have existing in here is created cropped.

So what we're trying to do is pull in the image in its true size, which is wanted to, which is why it wants it to scale.

So right now the image is cropped and I shared the size and position of where the image is so that they could actually see.

So entering all of that information in now ChatGPT spit out this whole big obnoxious piece of code.

So I'm gonna take this, copy this.

I think that's what I have already put over here.

I'm going to paste it over here.

It's pulling in the wrong alt text.

So I'm going to want to update that.

This is where Chat GPT isn't perfect, right.

So I'm going to update that again, make sure there's no spaces and then I'm going to remove.

So ChatGPT was telling me why it did certain things.

So matches this matches this and this is all being copied into the code.

So I'm going to remove.

Whoops.

All of that mumbo jumbo.

that we don't need.

So we don't need that.

We don't need this I believe all the way up to.

Yeah, anything gray we don't need basically.

so I'm going to remove that and this one, you can keep it in there.

It will still work, but we don't need extra code for no reason.

Okay, so let's give this a try.

Now I am back.

And show it.

I am going to take my embed, I'm going to paste the new embed that it gave me, click save and there is my image.

So we are going to adjust it to be the size that we want and it looks the same, which is exactly what we want, which is beautiful.

So I'm going to do the same thing on mobile and then we are going to test it to make sure that this works.

This is why show it does what it does because it's so much easier for you just to add in an image and crop it and adjust it how you want it to be.

Right.

So okay, I am going to delete the old image, and I think that should be deleted on this side as well.

And then I am going to hit publish and we are going to take a peek.

So after it's published, we're going to check the alt text, see if it shows up in Accessibility, and just make sure that that image is working as we want it to.

So anytime you kind of have a code issue, that's one of the things that I love to do is pop over to chat GPT, explain the information, test some new code.

Worst case scenario, you delete the embed.

Right.

it's not going to ruin anything.

Okay, let's refresh this page.

I am going to scroll.

Guess what?

I could not scroll.

So I could remake this entire part of the video and show you that this is as, it's as easy as this to do it.

But the reality is it's not like there are so many things that can go wrong and that can be tweaked.

So what happened is that image that I had, it actually reduced.

It like blocked the ability to scroll this page.

I couldn't actually scroll the page.

So in those situations what I do is I go back to trusty old, trusty old chat, gbt, ask it to rewrite me code, which I realized I just did in a, completely different chat.

But then I went into my showit, I updated the code, everything still looks the same and it adjusted just fine and I was able to scroll.

So if you hit a roadblock and you're like, what did I do?

Did I break my website again?

You can go back and you can just simply remove the code and go back to the image or you can go to ChatGPT and have it revised.

So now you can see this is automatically identifying it as an image, unlike these two.

So I can see that this is going to save as an image and I can also, I will likely see it also on this side.

So if I scroll down to that section now I get to see my alt text for my image.

Was that the easiest thing in the world to do?

No, not at all.

But this is why I'm sharing this with you.

Because it's something that if accessibility is really, really important to you and certain pages in your website, then this is and that you can absolutely spend time updating or say you're a web designer and you want to include this as an add on service to your website projects.

You absolutely can.

It's just something that helps make this platform more accessible for everyone.

So anyways, I will share all of this, the code for you.

Sometimes it will be as easy as copy and pasting this and sometimes you might have to go to ChatGPT to actually troubleshoot certain images and issues.

Especially if you're using like cropped features on your images or any custom, custom styling that can change things.

So if you're putting images in circles, if you are putting them in other shapes, then that is definitely going to change the styling on your images.

So again, leverage ChatGPT to help you write that code.

And if you are updating pages on your website, definitely prioritize those that need to be more accessible for humans.

So at the end of the day, your website on Showit is indexable.

Showit can find those images, so write in your alt text.

Still a good thing.

On the opposite side, it is not accessible for all human beings.

And so that is kind of the balance that we're playing right now.

And hopefully Showit updates it possibly by the end of the year.

So I hope this helped you and have a good rest of your day.

works.

So once you've created your code, you're going to copy and paste that.

You're going to go back to Showit and then wherever that image is, I want you to do add element, embed code.

Paste that code in here.

So you can see we have image source, we have our alt text and then we have the style which is the size.

You're going to hit save and boom.

there's your image.

You are just going to drag it and put it in place.

Same with desktop.

you are.

And because we have auto it is going to adjust for us so that you don't have to deal with the adjusting mobile and you can do custom code for mobile and desktop but it's just like makes things a little bit more hectic and we don't need to do that right, because this is already way more work than we want it to be for our images.

So anyways, get those situated however you want.

What I would do is I would delete your image then.

So the image that you actually have here, I would delete it.

If you want to keep it as a background, that's totally fine.

You can however, when show it, show it is aware of this issue and they are going to fix it.

We just don't know when, when they do fix it then you'll just have double happening there.

So it's totally fine if you want to leave it there because then you can go back and delete the embed, but your embed isn't actually going to mess anything up.

Your embed is going to be just fine.

So if I go ahead and delete that graphic now, all you're going to see here is the image and we're just going to, we'll have Courtney triple check this, make sure it's good.

We're going to hit publish and then we're going to wait for this.

We're going to go check it one more time with that Silk Tide Chrome extension to see if it picks it up.

So as soon as this publishes then we will do that nice and slow today because it's Sunday.

Okay, I'm going to exit out of the code here.

Reload this page.

Scroll, scroll, scroll down to the section I want here.

Now I'm.

And it scrolled me all the way back up.

Anyways, check that out.

There's my image.

That's what I want to see.

I want to see it show up here, and I want to see it pull in that alt text that I had already written.

So voila.

Now this is how you will do alt text if you want it on showit.