I display my business's contact details on my website by using an image of my contact-card. Now I do want to mark up the data by using schema.org, so I did that by the schema creator tool, pasted it on my site, and set display to none. However, I read on Google's website that they will not use rich data that is not visible to human readers. But the image just looks a lot better than to just use text. Any work around on this?
The google structured data policy describes a few exceptions such as including machine readable data to avoid ambiguity (dates, prices, etc). What is actually says it that the extra meta tags of hidden information are not displayed which suggests they may still be useful in search results although the extra data won't preview.
The better solution would be to add the http://Schema.org/ImageObject schema within either another schema, like
Person schema. Example structured data (microdata format) for an image with a heading (h1) of the person's name, and Job Title and Company Name written under it in the caption:
<body itemscope itemtype="http://schema.org/Person"> <h1 itemprop="name">J. Smith</h1> <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> <img itemprop="contentUrl" alt="This shows only when moves hovers over image" src="http://example.com/images/jsmith.jpg"><meta itemprop="uploadDate" content="2015-01-31"/> <span itemprop="exifData" itemscope itemtype="http://schema.org/PropertyValue"> <meta itemprop="name" content="GPSLatitude"/> <meta itemprop="value" content="29.760427"/> <meta itemprop="name" content="GPSLongitude"/> <meta itemprop="value" content="-95.369803"/> <meta itemprop="name" content="UserComment"/> <meta itemprop="value" content="Extra information for J. Smith"/> <figcaption> <span itemprop="jobTitle">Sales Manager</span>, <span itemprop="worksFor">BMC Enterprises</span></figcaption> </figure> </body>
I'm assuming here that the image will be on a page which no doubt already includes business information or personal information which is contained in the image. The
name of the
Person also links to social media. The latitude and longitude are for Houston, Texas found online.
Organization) you choose can use can make the ImageObject include more propertiesr than just the
<img> tag to add details.
Even simpler is that by using the
alt HTML tag to add a description of the image you are able to include much of the information on it that you want data (alt tag is also important both for accessibility/impaired vision users and for given a default description should the image be pinned on pinterest). The alt tag is visible only when the user does a mouse-over on the image. I don't see a way to add the
alt tag to structured data but it will be seen by search engines as relevant info, including in image searches.
You might also want to include machine-readable information on the image's properties, for example you add data using the
exifData properties within the jpg, png, etc using advanced photo editor. The GPS location might be particularly useful for a business.
The schema generators online seem often to be very limited or not include much information. If you do it yourself from examples you can use google's structured data tester to check it before using it.
Google will and always has accepted Schema.org as hidden data. With the adoption of JSON-LD, this is even more true. LD is totally a script, you cant "surround your content" with it. As long as you're not cloaking/spoofing then you are fine.
What you should do though is use the organization schema to define your business, then include place within that. Then use the place image as your contact card photo. Otherwise, it's quite illogical to solely use a pic of a contact point when specific schema is available to define all of that.
As long as you define your contacts as organization schema with nested placed containing your contact image you will be fine.