Valid Image Size for JSON-LD Snippet Markup



PC and AMP Image Size for Valid JSON-LD Snippet MarkupWeb Image Size for Valid JSON-LD Snippet Markup

This article will help you know how to choose images for rich snippets that test with valid JSON code as well as basic best practices for images used in your web pages and posts.

SITE LOGO IMAGE

To understand the overarching use of images in schema, ‘logo’ and ‘photo’ are categorized as sub-properties of ‘image’. Correct use means gaining more control over what populates in a business’s Google Knowledge Graph.

Every website has a logo (or should have one), and correct logo markup lets web masters tell Google which image they want used in their Knowledge Graph display.

Guidelines say, “You can specify which image Google should use as your organization’s logo in search results and the Knowledge Graph. To do this, add schema.org Organization markup to your official website that identifies the location of your preferred logo.”

A business’s ability to advance their position in SERPs continues to grow, and Google algorithms now rely more heavily on this form of markup. Schema.org provides a list of its new releases. Schema for images has been provided for some time. The 1.7 release on July 8, 2014, stated: “This release amends the image property, noting that ImageObject is a reasonable value.” And it is rapidly developing, so businesses have more opportunities to use mark up.

ARTICLE IMAGE

As found exactly in Google Guidelines: “ImageObject; required (AMP), recommended (non-AMP)

The representative image of the article. Only a marked-up image that directly belongs to the article should be specified.

*Images should be at least 696 pixels wide.

*Images should be in .jpg, .png, or. gif format.

* Image URLs should be crawlable and indexable.”

How to Gain an Ideal Article, Blog, and BlogPosting Image in your Google+ PostsTrends in Google Image Search

Here is one example of when your site can benefit from the correct use of images. When a new post on Google+ is published, it may include an eye catching image in the link that is generated. Google renders a preview, or SERPs snippet, that today consists of the page’s title, a brief description of it, and a thumbnail image to nap viewer’s attention.

Google offers a page with extensive details about the rendering of an Article image.

First, you must have the required schema markup to gain this feature. Then, the image size must also fit the guidelines and must be as follows:

* Image is at least 400px wide

* Image has an aspect ratio no wider than 5:2 (width:height).

When your +Snippet Image Fails to Display

Google reveals a potential reason why: “Images that are too small or not square enough are not included in the +Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, the height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0.”

VIDEO IMAGE THUMBNAIL

Internet users are pushing the level of video content consumption upwards. What that means to you implies that marking up your website with video web pieces with structured data will assist Google Semantic Search with an entry point for discovering and helping to match search queries to your relevant videos available online.

A thumbnailUrlmust be provided that indicates the video thumbnail image file that can be display in search engine result pages (SERPs). “Images must be at least 160×90 pixels and at most 1920×1080 pixels. We recommend images in .jpg, .png, or .gif formats. All image URLs should be crawlable and indexable. Otherwise, we will not be able to display them on the search results page,” Google currently states.

The following custom thumbnail best practices for video image size and resolution are offered. “Your custom thumbnail image should be as large as possible, as the image will also be used as the preview image in the embedded player. We recommend your custom thumbnails:

* Have a resolution of 1280×720 (with minimum width of 640 pixels).

* Be uploaded in image formats such as .JPG, .GIF, .BMP, or .PNG. 
Remain under the 2MB limit. 

* Try to use a 16:9 aspect ratio as it’s the most used in YouTube players and previews.”

Your video content is imagery that is both highly visible and in demand by Internet users. Take time to select the cover image that announces your video content. Maximize the impact of your images on-page and in search to add interest and encourage user engagement.

AMP IMAGE CAROUSELExample of AMP Image Carousel for mobile users.

It uses the amp-carousel-0.1.js file and width: 100%. Coders rely on the type carousel to display a list of similarly sized images as a continuous strip. The amp-carousel component makes ideal use of smaller screen spaces on smartphones to let mobile viewers choose from among multiple similar thumbnails of content offered by clicking on a image along its horizontal axis.

In a March 6, 2016 RelayMedia article titled Spread the Carousel Love, it leads by saying “Any publishers hesitant about AMP should consider the opportunity they’re missing.  There’s essentially no risk in publishing AMP articles, and much to gain in terms of search prominence and learning.”

We are seeing broader use of the Product Image Carousel. This is high-value real estate for book authors, film makers, famous people, and e-commerce stores. And its use is expected to grow.

The AMP by Example page uses 400px wide by 300px for height for each carousel images.

NON-AMP IMAGE GALLERY

Non-AMP Page with Structured Data Image Gallery

If your site is not ready for the benefits of AMP yet, Non-AMP pages can also become a rich result in a SERP rich result list, or in a carousel that displays similar non-AMP web pages. Rich results can include headlines and images. Although Google attempts to extract enough information automatically, so that sites can to qualify for such features, if the web pages has correctly implemented structured data, it can help search engines better interpret your content and improve your likelihood of obtaining a rich card image or image carousel result.

A thumbnail image relevant to the Thing

<
"primaryImageOfPage": {
"description": "Indicates the main image on the page.",
"$ref": "file://imageobject.json"
},
"image": {
"oneOf": [
{
"$ref": "file://imageobject.json"
},
{
"type": "string",
"format": "uri"
}
],
"description": "An image of the item. This can be a href=\"http://schema.org/URL\">URL or a fully described href=\"http://schema.org/ImageObject\">ImageObject."
},
"thumbnailUrl": {
"type": "string",
"description": "A thumbnail image relevant to the Thing.",
"format": "uri"
},>

The Github JSON Schema Form Repository is an ideal site to participate in for gleaning code examples and contributing to how this area of the web is expanding.

Exact, Specified Image Details are In the Google Schema Guidelines

Semantic search professionals previous needed to adhere to less ridged guidelines when using the of the image property for markup for an Article, NewsArticle, and LocalBusiness. Initially, only an image URL was necessary. It then stated that “[a] URL, or list of URLs pointing to the representative image file(s)”, along with suggestions. Many of the early suggestions have now rolled into rules, in particular for articles.

The revised guidelines now seeks to make sure that the image itself visibility adds value to the page. While GoogleBot doesn’t see it with the human eye, the search giant now says that it the image ought to be “[t]he representative image of the article… that directly belongs to the article.”

Given that an article may have several images within it; this removes the guess work out of the selection process for a search engine when displaying the article with an accompanying image snippet. It is also interesting that a minimum size is instructed: “[i]mages should be at least 696 pixels wide.” One may surmise that this points to the value of an image on the page, and that it shouldn’t be an annoying thumbnail size.

The current condition that image height and width must be included points to the fact that a simple URL declaration for image is no longer supported for article rich snippets and will produce a critical error. There is no mistake in assuming that this is part of Google’s nudge to help web masters move to Accelerated Mobile Pages (AMP). AMP elements are meant to load quickly and much is deleted or defined when it comes to layout of a mobile article.

When the image dimensions are explicitly added, it gives Google the ability to render images associated with AMP articles correctly on different devices. It attempts to “replace image references with images sized to the viewer’s viewport”. This is one reason why an image may spill outside of boundaries when viewing an AMP version on a PC. The image size exchange is not made because it is ready the measurements of the larger screen.

While previously the amp-img requirement that the tag “must include an explicit width and height”, now the same is universal for desktops. For web designers who lean on using relative URLs for image insertion, they must adjust for AMP, where the ImageObject URL declaration calls for an absolute URL rather than the relative URL version. This makes sense when considering the tasks a browser has in order to render a web page. In aggregate, it only slows Google down to have to parse code in order to calculate image dimensions.

After all, the intent of AMP is to load pages faster. That comes from users who don’t want to wait. Do why not simply offer the image data upfront?

PRODUCT CAROUSEL E-COMMERCE IMAGES

Often times it comes to a choice of which page is best for adding structured markup to an image. Implement it on the individual product page in your shopping cart versus the category page with multiple products listed. This will avoid confusion for prospective buyers.

The image found in a valid rich snippet and image search result can be rich with product information that e-Commerce shoppers want.

Ways to Stipulate JSON-LD Image Dimensions

Depending on the scenario, try to annotate your mark-up first with JSON-LD, unless the guidelines specify a different format as preferable.

When using JSON-LD mark-up, image values without the use of quotation marks are “numbers”, whereas values expressed within quotation marks are “strings”. That means that a coder needs to be deliberate to avoid the quotation marks when a numeric value is the desire outcome.

A common way to stipulate the height and width of an image is "width": "600px", but for many modern browsers, that poses the issue of the expected value for “width”, since it expects “Distance” or “QuantitativeValue”. Tests run that include “width”:”600px” have been changed by Google into:


"width":{
"@type":"Intangible",
"name":"600px"
}

This still lacks information about what type of measurement unit is being used. Try substituting “Distance” using something like this:


"width":
{
"@type":"Distance",
"name":"600 px"
}

Think beyond the point of obtaining valid markup here as it still leaves an amount of ambiguity as to the unit of measurement and forces search engines to try to ferret out what is meant by using “px”. Our preference is to use the Linter Structured data tool, it likes images that use “QuantitativeValue” instead:

"contentSize":"298 Bytes",
"width": {
"@type": "QuantitativeValue",
"value": "700"
},
"height": {
"@type": "QuantitativeValue",
"value": "490"
}
},

URLs describing image entities should be stable and not depend on variable data. This example of image markup will be interpreted as a reference, rather than a string literal, because (at the time of publication), the schema.org JSON-LD Context defines image to be of type @id:
Example of schema.org context snippet for codinng a JSON image:

{
"@context": {
...
"image": { "@id": "schema:image", "@type": "@id"},
...
}
}

If not expressed as such in a remote context, given terms may be (re-) defined in a local context:

Example of typed image relationship:

{
"@context": ["http://schema.org", {
"image": { "@id": "schema:image", "@type": "@id"}
}],
"id": "https://www.wikidata.org/wiki/Q22686",
"type": "Person",
"name": "Donald Trump",
"givenName": "Donald",
"familyName": "Trump",
"jobTitle": "President-elect of the United States of America",
"image": "https://en.wikipedia.org/wiki/Donald_Trump"
}

If a site is on the WordPress platform and relying on a plugin to render structured markup, issues may arise where you need to fix the Image property. Is this case, commonly it is because a Featured Image must be used for Page or Post. Without this set-up, the plugin fails to recognize which photo best represents that article’s content. The plugin depends on this information to add the ImageObject along with its size dimensions.

Aaron Bradly of SEO Skeptic recommends that “the benefit Google hopes to gain from Article markup, in general, is the ability to better manipulate articles in the Google ecosystem due to an improved understanding of an article’s components and provenance, rather than using the markup to better understand what an article is about.”

Now combine that thought with the familiar statement that an image is worth a thousand words, and combine both a powerful image selection with the appropriate schema structured data around it.

ADDITIONAL IMAGE SUGGESTIONS

1. When Possible, Avoid Stock Photography

A lot of clients ask about what type of image they should use. Go for an image with people in it if possible; a happy looking individual lifts the viewer’s spirits, perhaps unconsciously, are powerful. Human faces and body language tell a story, which makes the compelling. Every notice how a child stares unabashedly? It is natural to gaze at faces more than any other type of images. Every web page should have pictures of people, or at least a picture.

Site visitors can immediately recognize a stock image. Such images of people seem to be the worst offenders as they just don’t feel genuine. Don’t be too leery of simply using your smartphone camera. Images that are composed with immaculate lighting, spotless office rooms, photo-shopped to unreal perfectionism, and are comprised of 50/50% ethnically diverse people in them just aren’t the way life happens.

Given the power of an image, invest in a bit of original professional photography. Dress up but still look natural for picture day. Unless they are glaring, skip editing out minor imperfections; a picture that conveys aestheticism is more important than showing off a “polished” state of being.

The most common mistake made when using stock photography is making a choice to select random images instead of ones that sufficiently related to the article or blog posts topic. To safeguard your dependence on stock image, if buying, go for a site like Getty Images or Fotolia where the general photo quality is higher.

After conducting a study of image use on 41 blogs 41 blogs within different online niches, Neil Patel concluded that “On average, when a blog post used a stock photography image, it received 152 tweets and 83 Facebook likes”.

2. For Lighter Loading Images Use CompressionGoogle image search on mobile devices

Notice that in the image at the top of our page, the background is faded, which reduces resolution in those spaces while it is possible to leave a higher resolution aspect on the focal point of this graphic, the woman.

There are many resource lists online of tools that assist with image compression. Try more than one to settle on your preferred process to best encode your images, delivering the identical picture with the fewest bytes, while not teetering into being over-optimized.

Upfront, know which photo format to use that works best for image compressing. For instance, converting a (non-animated) GIF file into an image PNG would lower it’s by 21% on average. Guy Podjarny declares, that “converting a (non-transparent) PNG file to JPEG can offer even bigger savings, often cutting file size by 3–5x. New formats such as WebP & JPEG XR can take it even further and communicate the same visual with 25–50% fewer bytes”.

3. Fix Issues that Impede Loading Images Faster

Then there is more to think of: how your images load is the work a browser has to do, which determines how speedily your images can be displayed. Web designers that depend on CSS with lengthy instructions, JavaScript to manage graphics, or rely on WordPress Plugins to do some of the work, may be unduly complicating matters. Each aspect needs to be carefully examined, which is best accomplished in a full-site Technical SEO audit.

4. Images Should Fit the Intent and Topic of the Page

It takes more time to be intentional, but especially the main image on a page should clearly fit the intent of a page.

Neil also reported that when using graphs and chart images, he received the highest number of trackbacks. “On average, they received 258% more trackbacks than blog posts with other types of images.”

Posts that contain image data may not command mass attention, but they hold their own merit from an educational and business perspective. They add value on instructional niche blogs (like this one) and frequently garner a link back to them. For research purposes alone, an embedded chart, actionable or static, may actually increase in value. Where some forms of graphical content become dated after a number of years, Neil found that “other blogs will still link to data-rich posts with charts, regardless of the posts’ age.”

Hubspot says, “if a relevant image is paired with that same information, people retained 65% of the information”. The January 3, 2017 2 Visual Content Marketing Statistics You Should Know in 2017 article

5. Engage Hand-drawn, 3-D graphics, and Animated Images

Hand-drawn, 3-D graphics, or animated images are popular and are generally are of less weight, especially when using a light background. Take a quick look at the images used by Rand Fishkin for his astoundingly popular White Broad Friday blog posts (moz.com/blog/). Maybe a “pastel background” isn’t your brand look, but it was likely chosen for a good reason. If you don’t have time to create or like these image types, then attempt graphs, infographics, or stock photography.

Keep in mind the image size requirement for utilizing schema markup. Why limit the future use of the page by only focusing on the visual appeal of an image?

“The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is.” – Guy Podjarny on Oreilly

“Did you know 90% of information transmitted to the brain is visual? The brain also process visuals 60,000 times faster than text and studies have shown 40% of people respond better to images than plain text,” states shiftelearning.com.

Summary

Authoritative business sites that rose to the call for AMP pages, used a planned structured approach when building content, and incorporate schema data markup were among those early adopters. They already are able to enjoy the first-mover benefits of winning more viewer clicks from the scrolling images.

A relevant image that has microdata has the potential to enhance a site’s CTR within search results from anywhere between 10-25%, according to Bbuiltvisible.com. In the case of the need to troubleshoot your markup for an image code error, currently, two types of errors are produced. We can resolve errors and fix both for you.

1. The “image is required” error that can be found in the Google Structured Data Testing Tool (SDTT).

2. An image error that when checking for the Accelerated Mobile Pages (AMP) version.

Your photos reached a new record on Google Maps!Your photos reached a new record on Google Maps!

After adding the above image strategies to one client site, they received a message directly from Google that their images uploaded to their Google Plus Community had a significant increase in views. Ready to start a more advance approach to how your business site uses imagery?

“Your photos helped people over 3,000 times, a new record for you on Google Maps. Congratulations! Millions of people rely on photos like yours when they search for places. Thanks for sharing your photos with the world.” – Google Maps

Leverage cutting-edge opportunities to make your site’s image use more advantageous to both and viewers and your business. Call 651-206-2410 to get on our Schema Site Audit Schedule

 

 

NOTE: Topic image source: PHLEARN. Consider hiring a professional photographer to make critical image edits that can transform an flawed image into one perfect to use.
NOTE: Informative references have been listed in context at time of use.

Ads

You May Also Like

Use Google’s Rich Card Report to Gain Fully Enhanced Cards

How to Read your Google Search Console Rich Cards Report This year Google revamped ...

Google Structured Data Update and Increased Support

Google Structured Data Update in Search Console Structured Data Markup Paints a Picture of ...

Fix Product Markup Errors to Avoid Google Manual Action

How to Test & Fix Product Markup to Avoid Google Manual Actions Web search ...