Making Images Discoverable

[Trains1985]

All of the .jpeg and .svg files included in my index.html for my portfolio website have found their way to Google Images. In contrast, non of the .jpeg files on my relative pages have (to my knowledge). 

The remaining .jpeg files were never photos. Instead, they are renditions of real locations, created using Illustrator, then re-saved in PS as Save for Web files.

Where and how do I specify a given image, so it (i.e. a rendition of the Washington Monument, etc.) can be populated within a collection of images with similar, but unrelated domains on Google Images? Furthermore, how do I enable relative links to be directly accessed from their browser, bypassing the index page, etc.?

I assume this may be a metadata question. Am I correct?

Thanks,

Matthew

[Ben M]

If only your homepage is being indexed and none of your subpages are, this likely has nothing to do with metadata and more to do with the ability of a search engine to index your site. Can you share a link to the page in question so we can take a look and determine what could be causing indexing issues?

[Trains1985]

Good to know and Absolutely!!!

matthewjablonski.com

Note: Building this site has been a multi-year learning experience for me and is far from over. I apologize in advance for its lack of responsiveness it has. However, you are more than welcome to visit it. My artworks deserve a proper presentation, having the hundreds of hours I've put into them. Any insight is much appreciated!

Matthew

[Nancy OShea]

There are no easy answers to this.

Start by reading Google's SEO Starter Guide for details on how to optimize your site for better search engine recognition.

The more relevant, keyword-rich text you use, the better chance that search engines will discover your content.

Spaces in folder & file names are not valid HTML5 code.  You should rename them without spaces.

EXAMPLE:

<img src="Images/Gallery_Images/COLOR_on_the_Rails/Thumbnails/Weverton-MD_Final.jpg" alt="Train Illustration 1/25" title="Train at Weverton, MD - color illustration by Matthew Jablonski">

<caption>Lorem ipsuum dolor....</caption>

Adding a title attribute to images as well as descriptive caption text that can be searched, indexed and translated will add greater meaning & accessibility to visual content.

To protect your artwork, use digital barcoding.  It won't stop theft but it embeds a tracking code into your image that's invisible to humans so you can learn where your images are being used & by whom. 

Digimarc barcoding service costs extra but I believe the Photoshop Plugin is free.

• https://help.digimarc.com/articles/Digimarc-Barcode-for-Digital-Images
• https://helpx.adobe.com/photoshop/using/digimarc-copyright-protection.html

Hope that helps.

[Jon Fritz]

The problem may well be the lack of actual content for Google to latch onto and decide what the images are for.

On your home page, while somewhat limited, you have some html copy giving context to the images. 

On the remainder of your site, there's little to no html text content aside from city/state and a fraction (as far as search crawlers can see it). So Google might not be indexing those pages the same way it's doing your home page. It follows your links from there to what it deems are essentially blank (info-less) pages. 

Your Description Meta tag really should be a short paragraph describing what's on the page, not just a list of keywords. That description along with the page title and other relevant and related html information throughout the page are what Google "sees" when it decides to index a site. 

Using html5 semantic elements like <figure> and <figcaption> should help quite a bit. They literally tell search bots "this caption is about this item" while working with images and the addition of copy to give context...

<figure>
  <img src="myartwork.jpg" alt="My Artwork">
  <figcaption>A picture of something important from somewhere important</figcaption>
</figure>

[Trains1985]

All very informative to me. That makes a lot of sense to me.

Now, are the <figure> and the <figcaption> tags invisable? What I currently have configured for pretty much all my renditions is like:

<div class="Kensington">
<img src="Images/Gallery_Images/COLOR on the Rails/Thumbnail Images/Kensington-Staton_Watermarked.jpg" alt="Capitol Limited at Kensington, MD">
<div class="edition">3/25</div>
<div class="location">Kensington, MD</div>
</div>

Is my second example more inline to flag the browser (following)?

<figure>

<div class="Kensington">
<img src="Images/Gallery_Images/COLOR on the Rails/Thumbnail Images/Kensington-Staton_Watermarked.jpg" alt="Capitol Limited at Kensington, MD">

<figcaption>The Kensington, MD's train station, designed by Francis Balwin in 1890, still serves passengers today, over 130 years later.</figcaption>
<div class="edition">3/25</div>
<div class="location">Kensington, MD</div>
</div>

</figure>

Matthew

[Nancy OShea · Accepted solution]

Now, are the <figure> and the <figcaption> tags invisable?

By Trains1985

========

NO.  Do not attempt to hide text from browsers. The practice is considered BLACK HAT tactics.

Back in the early days of Internet, BLACK HAT actors tried to manipulate search engines with hidden text and irrelevant keyword stacking.  It blew up in their faces when their sites were heavily penalized or blacklisted by search engines.

Google frowns on sites that use invisible text and ignores keyword meta tags.

If keyword text doesn't reside in the <body> of your document for browsers to see, it doesn't exist to search engine crawlers.

[Trains1985]

Very good to know, thanks!

That having said, with the somewhat limited html knowledge I have, is the only viable option to add more visible content, plus making sure that each image has no spaces?

Matthew

[Nancy OShea]

Yes. 

For inspiration, look at Adobe Stock Images.

https://stock.adobe.com/search?k=%22train+illustration%22&asset_id=357271873

[Trains1985]

Will do!

...and thanks for the "...HAT" intro. It's all very facinating to me.

Matthew