ALT for images, how?

[swehjo]

Searched for an answer here but haven't been able to find it...

I publish pictures on my site using categories ({phocagallery view=category|categoryid=...|limitstart=0|limitcount=0}). Are starting to create ALT-descriptions for Google's et al's indexing. Still working on my development site and not on the live site.

I add the text under Meta data options - Meta descriptions and have tried with different settings under Phoca Gallery Options - General settings - Alt value, like "Meta Description" and "Description>Title>Meta Description". Inspecting the code for the pictures I cannot see any value under ALT, just empty. On the other hand I cannot see the reference to the actual picture, only the thumbnail. How can I verify that the text I write is placed in the ALT-tag for the actual picture? I would like to do that in order to verify that my text is visible to the crawlers.

What am I missing?

Site:
http://www.mb219.com

Using:
Jomla 3.6.4.
Aimy Sitemap v3.18.1
Phoca Gallery 4.3.1
Phoca Gallery Button Plugin 4.2.1
Phoca Gallery Plugin 4.3.1

[swehjo]

As I understand from https://www.phoca.cz/forum/viewtopic.php?t=38302, Jan says:
"using "No Popup" for detail window, so it has own page, so the image gets own link"

Just to confirm, no other detail view than "Detail view - No popup" in Global configuration is possible in order to achieve ALT-tag and getting a clear link for best SEO?? None of the other alternatives, even those without "Image only" will give the same result?

[Jan]

Hi, ALT values are used for javascript detail window, which use the ALT for e.g. displaying a title or description. This is why this can be set in Options.

The question is, where you test it - in component or only in plugin?

[swehjo]

I don't know what you mean with component or plugin. Is set the ALT value in "Meta Description" for the picture and in Phoca Gallery Options - General settings - I point Alt value to "Meta Description".

That's it, no alteration of the Phoca Gallery code or likewise. No alteration of Joomla or its templates. I stick to - and will continue to - running out of the box functionality in order to simplify updates.

[Jan]

I mean in which part of your site you get the problem - if in article when plugin is used, or in component part? As for example Options are valid for component only.

Jan

[swehjo]

It's when I add a gallery in a an article. And what I'm looking for is a way to get the ALT-text connected with the full picture in a way that make google's et al's crawler to index the full picture together with the ALT-text.

[Jan]

Not sure if I understand, the ALT title is alternative text for image in case it is not displayed. Which means it is assigned to the current image (e.g. medium thumbnail) not the image which the A tag links (full picture)

[swehjo]

Ok,
I have an article in my site. That article has a gallery/thumbnails which points to the full sized pictures. How should I set this up so that:
1. the ALT tag visible in the html code so that the robots can find the path to the full sized picture (not the thumbnail) connected with its ALT tag?
Suppose <a href="http://MY_PICTURE.JPG"><img title="MY TITLE" alt="MY ALT" src="http://MY_THUMB.JPG"></a> would be an example....
2. everything working with plain Joomla Template and Phoca Gallery and also nicely on a phone etc?
3. when the visitor has looked at the full seized picture can click on the back arrow and come back to the article and not go into the gallery, showing only the thumbnails?
4. BONUS: the ALT tag is visible to the visitor, preferably when hovering with the pointer over the thumbnail as well as shown in the full sized picture after having clicked on the thumbnail?

Hopefully I haven't missed or misunderstood something...

[Jan]

Hi,

1) robots go through the links, so if there is a link to other picture, they can follow it. Robots will only follow links, alt is alternative text in case, the current image cannot be loaded for some reason

<a href="http://MY_PICTURE.JPG"><img title="MY TITLE" alt="MY ALT" src="http://MY_THUMB.JPG"></a>

This means, the browser displays this image: http://MY_THUMB.JPG, in case it cannot be loaded, tha ALT is displayed: MY ALT and the link goes to http://MY_PICTURE.JPG

There is no other interpretation.

2) not sure what you exactly mean, then just try to compare both html codes, the one which worked, the second which is different

3) if you are in article and you click to see the large image, you can see it in gallery component - there is an "up" button to category, etc. If you want to change it to "back" button, then it needs to be customized (some button with javascript which displays the last visited page)

4) This can mean, both images have the same ALT (which is not in conflict as both are the same images only the large of the size is changed). ALT is alternative text and should describe what the image is (for example for robots or for people who cannot see, etc.)

Jan

[swehjo]

Thanks for your responses Jan,
Sorry for sometimes being a bit confusing but it depends on me not knowing enough about building sites but am slowly learning

Regarding number 1:
I've fiddled around with different settings on General-Settings-Alt value. Unfortunately I don't really understand how the different settings work and haven't been able to find any documentation around it. Now, suddenly I get the information out, don't ask me how/why but I assume there is some cache that has fooled me.

Meta Description and Meta Keywords are set for the picture and "General-Settings-Alt value=Meta Description". Gallery in an ordinary article.

If I set "Detail view-Detail window=Shadow box" the page shows:

<a title="Title test" class="shadowbox-button" href="/index.php/component/phocagallery/136-subs/detail/666-sub-02?tmpl=component&detail=13&buttons=1" rel="shadowbox;width=680;height=560;options={gallery:'PhocaGallery'}">
<img class="pg-image" alt="Title test" src="/images/phocagallery/Main/History/thumbs/phoca_thumb_m_sub_02.jpg"></a>
<img class="pg-image" alt="Title test" src="/images/phocagallery/Main/History/thumbs/phoca_thumb_m_sub_02.jpg">

and the popup window shows:
<img class="pg-detail-image img img-responsive" alt="Meta description test" src="/images/phocagallery/Main/History/thumbs/phoca_thumb_l_sub_02.jpg">




If I set "Detail view-Detail window=Standard popup windows" the page shows:

<a title="Title test" class="js-button" onclick="window.open(this.href,'win2','width=680,height=560,scrollbars=yes,menubar=no,resizable=yes'); return false;" href="/index.php/component/phocagallery/136-subs/detail/666-sub-02?tmpl=component&detail=1&buttons=1">
<img class="pg-image" alt="Title test" src="/images/phocagallery/Main/History/thumbs/phoca_thumb_m_sub_02.jpg"></a>
<img class="pg-image" alt="Title test" src="/images/phocagallery/Main/History/thumbs/phoca_thumb_m_sub_02.jpg">

and the popup window shows:
<img class="pg-detail-image img img-responsive" alt="Meta description test" src="/images/phocagallery/Main/History/thumbs/phoca_thumb_l_sub_02.jpg">



Nowhere is the full sized picture mentioned/referenced. How would a robot find it? And connect it to the TITLE or ALT?

In regards to this I found this article https://raventools.com/blog/anatomy-of- ... o-gallery/. Maybe you have any comment on it?


Regarding number 2:
We can forget that, don't know what I meant myself

Regarding number 3 and 4:
Thanks, then I know!