How “View in 3D” and “Duplex for Web” Will Change Website Performance

4 min readJun 6, 2019

Today we’d like to take a look at some new features that were announced at Google I/O 2019. Namely: View in 3D and Duplex for Web.

Our CTO, Dmitry Barbashov, took the time to describe how he thinks these new features will affect a website’s performance and how schema.org might be the key developers will use to get the most out of these new features.

Website Performance

Most webmasters already know that showing up at the top of Google’s search results leads to more traffic, which frequently translates to more sales. They also know that utilizing Google’s “Enriched Results” can improve click-through rates and create engagement with the user before they even reach the website. Now, with the “View in 3D” feature, webmasters can leverage the experience of augmented reality to engage potential buyers and readers even further.

Needless to say, holding a “virtual” version of the product “in your hands” will immediately create a mental connection with the product and likely improve the chances of a potential sale. There’s a big difference between viewing a picture of a shoe and seeing the shoe on your floor, next to the rest of your collection.

These improvements in the user experience have been announced at Google I/O 2019 and should be available soon (June or July). Despite this, I think it’s possible to make reasonable predictions for how these features can be implemented on eCommerce and other websites.

Spoiler: schema.org is the key.

Customizing Search Results

All webmasters have the necessary tools to change their search results, but ultimately it’s up to Google to decide whether the results will be basic or enriched.

Let’s take a look at all the possible results:

Basic Result

Enriched Result

Rich Result

Knowledge Graph Result

Carousel

And now, also, View in 3D

All of these can be created using schema.org vocabularies.

Schema.org is a collaborative community activity created by Bing, Google, Yahoo!, and Yandex to create a universal way for webmasters to structurize data on their webpage for optimal parking by search engine spiders and other bots.

If we look at the list of possible content types we can see that it’s pretty huge:

And if you’re a software developer reading this, you’re probably finding that many of these are analogous to programming classes.

Plus, many of these enhancements can be applied to almost all content types (Breadcrumb, Star, Carousel, etc.)

Now, let’s talk code!

There are several options to create Structured Data:

1) Microdata

<p itemscope itemtype="http://schema.org/Person">
 Hi, I’m
 <span itemprop="name">Alice</span>.
</p>

2) RDFa

<p vocab="http://schema.org/" typeof="Person">
 Hi, I’m
 <span property="name">Alice</span>.
</p>

3) JSON-LD

<p> Hi, I’m Alice. </p><script type="application/ld+json">{
 "@context": "http://schema.org",
 "@type": "Person",
 "name": "Alice"
}</script>

I (and many of us here at QArea) prefer JSON-LD.

So, if our goal is to figure out how to use the “View in 3D” and “View in your area” features we would likely need to follow the same basic structure with some additional snippets:

<script type="application/ld+json">
{
   "@context": "http://schema.org/",
   "@type": "Product",
   "name": "New Balance 1080 v9 woman’s"
   "image": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
],
   "model": [
      "https://example.com/models/model.obj",
      "https://example.com/models/model.max",
      "https://example.com/models/model.gltf"
],
   "description": "...",
   "sku": "0446310786",
   "review": {
      "@type": "Review",
      "reviewRating": {
         "@type": "Rating",
         "ratingValue": "4",
         "bestRating": "5"
},
      "author": {
         "@type": "Person",
         "name": "Fred Benson"
}
  },
   "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.4",
      "reviewCount": "89"
},
   "brand": {
      "@type": "Thing",
      "name": "ACME"
},
   "offers": {
      "@type": "Offer",
      "url": "https://example.com/anvil",
      "priceCurrency": "USD",
      "price": "119.99",
      "itemCondition": "https://schema.org/UsedCondition",
      "availability": "https://schema.org/InStock",
      "seller": {
         "@type": "Organization",
         "name": "Executive Objects"
    }
  }
}
</script>

Feel free to take a closer look at the code. As you can see, it’s pretty straightforward, but pay special attention to the “model” field in line 10.

Now, of course, once Google releases these features to the public the filed names might change. However, I’m pretty sure that the 3D model will be connected in exactly this way.

And when it comes to formats? It’s like that Google will implement WebGL-based model viewers. If that’s the case, we’re likely going to find ourselves working with formats such as gITF and OBJ.

And, if we look at Google’s current examples of Web AR implementation, we can see that they’re using WebXR and gITF.

But then, of course, we’ll only know for sure once all of these features are released to the public.