Web Images Sizes for Valid JSON-LD Snippet Markup


PC and AMP 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.

In a recent webmaster hangout, Google’s John Mueller talked about how the search giant plans to use image search for more transactional, more educational, more search related tasks in 2019. We have seen the rise of images in Rich Cards and other rich features snippets that include visuals and expect this to continue.

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 markup.

Google updates it Structured Data Image Guidelines

As of September 15, 2017, Google is takig a more structured approach with specifics in its structured data image for image use.

We have started making copies from https://developers.google.com/search/docs/data-types/products in order to track how these guidelines are updating and compare variations. When conducting a consumer behavior analysis, observe which audience segment arrives on your site through an image search.

Whether for a local business, recipes, marking up products, book, event, tv-movies, etc, each needs special attention now to its image guidelines. Some data types have been updated from a recommended property to a required type.

The former guidelines we had were scant and said little but to provide an image; however, individuals implementing schema now must adhere to the new guidelines which are far more descriptive. One new guideline is a no-brainer: "Image URLs must be crawlable and indexable".

Formerly we needed only to provide a URL for each image. Now Google indicates that it wants "Repeated field of ImageObject or URL".While few of our pages didn’t contain an image, the new guidelines say, "Every page must contain at least one image, and it doesn’t specify that this is only for pages and posts that include schema markup. The difference may mean whether or not your content shows up in popular Google Cards.

But now we know that Google will select the image it favors to display in Search results by taking into account each image’s ratio and resolution. It is interesting that “resolution” is now referenced, which indicates a recognition that users learn a lot about a page from the images used on it and Google is specifying more about what factors matter in image selection.

Just any old image isn’t helpful to viewers, so naturally, we knew all along that images need to be relevant to the content marked up with schema. A clear change is that Google now reveals that it prefers an array of images at different aspect ratios. We learn that, "For best results, provide multiple high-resolution images (minimum of 800K pixels when multiplying width and height) with the following aspect ratios: 16×9, 4×3, and 1×1."

If you are using the thumbnailUrl image property, the same guidelines – including the recommendation for multiple aspect ratios – come into play. Not everything has gone the direction of being more specific. Whereas TV and movies formerly needed an image with "a minimum of 140px wide by 210px tall, with a 2:3 aspect ratio", currently, such specifications are replaced by these new "standard" image formats, meaning Google’s call for "16×9, 4×3, and 1×1" aspect ratios.

Webmasters who face the task of going back and updating and replacing former image to comply with Google’s new structured data image requests will be glad to know that article image guidelines have not changed. They keep the same specification for image pixel width: The URL to an image that is representative of the article. Only a marked-up image that directly belongs to the article should be specified. Formerly, images needed to be at least 696 pixels wide; be sure to stay current with Google’s Best Practices to have a better chance to have your images show up in Google Maps.

ARTICLE IMAGE

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

Additional image guidelines:

  • Only a marked-up image that directly belongs to the article should be specified.
  • Images should be at least 1200 pixels wide (formerly 696 pixels wide).
  • Every page must contain at least one image (whether or not you include markup). Google will pick the best image to display in Search results based on the aspect ratio and resolution.
  • Image URLs must be crawlable and indexable.
  • Images must represent the marked up content.
  • Images must be in .jpg, .png, or. gif format.
  • For best results, provide multiple high-resolution images (minimum of 800,000 pixels when multiplying width and height) with the following aspect ratios: 16×9, 4×3, and 1×1.

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

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 provides extensive details about the rendering of an Article image.

As of January 6, 2017, we were required to have image schema markup with an image size per the following guidelines:

* 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 CAROUSEL

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 page 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. Schema data has rolled into foundational SEO practices.

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.

Why Sites Needs to Optimize for Image Search

Rand Fishkin reported his analysis of Google image search in a March 14, 2017 article titled The State of Searcher Behavior Revealed Through 23 Remarkable Statistics.

Rand reported his analysis of Google image search on Jumpshot and Moz data and found that:

• Google Image Search the 2nd most highly used search platform following directly after Google.com in the 1st spot.

• Its searches are more than the remaining Top 10 web properties combined together.

• Over 10 times as many as any search on Bing or Yahoo.

• They tally higher than 40 times the number of image searches within the Facebook platform.

On March 14, 2017, Rand stated his belief on search behavior that “because people are naturally drawn to images and because Google uses click data to specifically show images that earn the most engagement”, more clicks are happening from the image block. With the growing use of JSON markup, adding this schema correctly is giving sites we manage improved visibility in SERPs.

Exact, Specified Image Details are In the Google Schema Guidelines

Much of today’s innovative technology for image recognition is reliant on Deep Learning technology, an advanced form of Machine Learning, and the advancing success of Artificial Intelligence. Semantic search professionals previously needed to adhere to less rigid 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 seek 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 guesswork 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 webmasters 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. Whether or not your site relies on plugins, some of your best SEO tools to troubleshoot issues are found in the Google Search Console.

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

The following are solely the opinion of Hill Web Marketing:

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. Ever 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 post’s topic. To safeguard your dependence on stock images, if buying, go for a site like Getty Images or Fotolia where the general photo quality is higher. Make sure you have images that can drive consumer engagement in your Google Ads campaingns.

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”. Watch how your image contribute or distract with your social platforms and if needed, engage a professional Social Media Marketing manager.

2. For Lighter Loading Images Use Compression

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.”

Images on your landing pages deserve special attention, as they are key to driving sales. 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?

Not all of the online images have been tagged correctly, so making your images rich with correct Metadata for correct optimization.

“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 ****

Partner with Jeannie Hill, founder of Hill Web Creations who works with Minneapolis businesses to ensure valid image size is used and had error-free code to improve organic search, search engine optimization for the mobile-first world, and chances for a competitive advantage online. Constantly vigilant to know and adhere to updates in Google’s SEO guidelines.
I enjoy residing in Minneapolis, Minnesota, where I provide digital marketing services to the metro area and beyond.

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 builtvisible.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!

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.

* https://blog.hubspot.com/marketing/visual-content-marketing-strategy#sm.000000iy0z9nnp3d6210gl3qzksok

** https://www.relaymedia.com/2016/03/06/spread-the-carousel-love/

*** http://www.oreilly.com/pub/e/3425

**** http://info.shiftelearning.com/blog/bid/350326/Studies-Confirm-the-Power-of-Visuals-in-eLearning

***** https://builtvisible.com/micro-data-schema-org-guide-generating-rich-snippets

****** https://www.quicksprout.com/2014/08/13/what-type-of-images-should-you-use-within-your-blog-posts/




" Jeannie Hill : ."

This website uses cookies.