This”featured snippet” perspective is possible since the content writer,, has broken this recipe into the smallest meaningful chunks suitable for this subject matter and audience, and then expressed information about those chunks as well as the relationships between them at a machine-readable manner. In this instance, has used both semantic HTML and connected data to make this content not only a page, but in addition legible, accessible data which can be correctly interpreted, adapted, and remixed by calculations and smart agents. Let’s look to learn how they work across indexing, aggregation, and inference contexts.
    As it is composed of organized content that’s marked up 36,, Regardless of the simplicity of the City of Seattle parking page, it effectively ensures that the integrity of its content across contexts. “Pay My Ticket” is a level-one heading (

    ), and also each of the options below it’s level-two headings (

    ), which indicate that they are subordinate to the level-one component.
    Than we see with Boston the identical Google Assistant search , however, offers a far more useful effect. In this case, the Google Assistant direct links right to the”Pay My Ticket” page and also lists a number of ways I can pay my ticket: on line, by email, and in person.

    A structured content layout approach frames content resources–such as articles, recipes, product descriptions, how-tos, profiles, etc.–not as pages to be found and read, but as bundles composed of small chunks of content data that all relate to one another in meaningful ways.

    The City of Boston website's “How to Pay a Parking Ticket” page, showing a tabbed view of ways to pay and instructions for the first of those ways, paying online.

    Practitioners from the design community have shared a wealth of tools lately on creating content systems which work for algorithms and humans alike. To Find out More about implementing a structured content approach for your organization, these books and articles are a Terrific place to start:

    Google Assistant app on iPhone with the results of a “how do I pay a parking ticket in Boston” query, showing results only weakly related to the intended content.
    Google Assistant app on iPhone with the results of a “how do I pay a parking ticket in Seattle” query, showing nearly the same results as on the desktop web page referenced above.

    These results are not only aggregated from disparate sources, but are translated and remixed to provide a customized response. Getting directions, placing a phone call, and obtaining Dr. Ruhlman’s profile page on are at the tips of my hands.
    The hunt for another recommendation, MD, Stacey Donion, provides a very different encounter. Like the Town of Boston site above, Dr. Donion’s profile about the Kaiser Permanente site is perfectly intelligible to some sighted individual reader. However, because its markup is presentational, its content is imperceptible to software agents.

    Linked data and content aggregation

    Google Assistant app on iPhone with the results of a “what time does Doc Dr Stacey donion office close” query. The results displayed include a card with “8AM–5PM” and the label “MulitCare Neuroscience Center, Monday hours,” as well as links to call the office, search on Google, get directions, or visit a website.

    In 2012, content strategist Karen McGrane wrote that”you do not get to decide which platform or device your customers use to get your content: that they do.”

    Say that I would like to collect information about two recommendations I have been awarded for surgeons. A search for a first recommendation, Scott Ruhlman, MD, brings up a set of links in addition to a Knowledge Graph info box containing a photograph, location, hours, telephone number, and testimonials from the net.

    The City of Seattle website‘s “Pay My Ticket” page, showing four methods to pay a parking ticket in a simple, all-text layout.

    This statement was meant to aid strategists, designers, and companies get ready for the imminent growth of mobile. With the growing prevalence of smart assistants and queries, an organization’s website is less inclined to become a possible visitor’s first experience with abundant content and less. Such as finding location info, hours, phone numbers, and ratings–this pre-visit participation might be a user interaction with a data source.

    The business case for content that is structured layout

    Content is a mainstay of many kinds of information about the internet. Recipe listings, for example, have been based on content for years. When I hunt, by Way of Example,”bouillabaisse recipe” on Google, I’m provided with a standard list of links to recipes, as well as an Summary of recipe measures, an image, and a set of tags describing one instance recipe:
    In this instance, Dr. Ruhlman’s profile has been marked up using microdata based on the language. This foundation provides the semantic base on. The Knowledge Graph information box, for instance, includes Google testimonials, which aren’t a part of Dr. Ruhlman’s profile, but which have been aggregated into this overview.
    In addition to the indexing purpose that traditional search engines perform, smart brokers and AI-powered search calculations are now bringing in the mainstream of accessing advice: inference and aggregation modes. Because of this, design campaigns that are devoted to creating effective pages are no longer sufficient to guarantee accuracy or the integrity of articles published on the web. Instead, by focusing on providing access to information in a structured, systematic manner that’s legible to both machines and humans, content publishers may ensure that their content is both accurate and accessible in those new contexts, whether or not they’re creating chatbots or tapping into AI directly. In this guide, we will look at the forms and impact of structured material, and we are going to close with a set of resources that can help you get started with a structured content approach to information design.

    A combined HTML code editor and preview window showing markup and results for heading, ordered list, and list item HTML tags.

    Program broker search and semantic HTML

    MultiCare Neuroscience Center, you’ll recall, is where Dr. Donlon–the neuroscientist Google thinks I may be searching for, not the orthopedic surgeon I’m really looking for–practices. Dr. Donlon’s profile page, much like Dr. Ruhlman’s, is semantically structured and marked up with connected data.
    Because people understand what lists and headings look like and mean HTML structured in this way is both semantic and presentational, and calculations can recognize them as elements with defined, interpretable relationships.

    The City of Seattle website’s “Pay My Ticket” page, with the HTML heading elements outlined and labeled for illustration.
    The City of Seattle website’s 'Pay My Ticket' page, with two HTML heading elements outlined and labeled for illustration, and an open inspector panel, where we can see that the headings look the same to viewers but are marked up differently in the code.

    Instead of a concentrated selection of actions to follow up in my query, I’m presented with all the hours of operation and contact information .

    Google search results page for a bouillabaisse recipe including an image, numbered directions, and tags.
    A”featured snippet” to get on the Google results page. The machine-readable values are shown by the pane on the right.

    In order to tailor results to these queries that were specifically formulated, software agents have started inferring purpose and then using the related data in their disposal. If I ask Google Assistant what time Dr. Ruhlman’s office shuts, for Example, it responds,”Dr. Ruhlman’s office shuts in 5 p.m.,” and exhibits this result:
    These components, when designed well, communicate information hierarchy and connections visually to readers, and into calculations.
    These kinds of interactions, but are only one part of a far bigger issue: connected data is key to preserving the integrity of articles online. Like the hospitals, government agencies, and colleges I’ve consulted with for years, don’t measure the success of the communications efforts in page views or ad clicks. Success for them means linking components patients, and community members with precise information regarding the organization that information might be found and solutions. This communication-based definition of achievement readily applies to practically any type of organization working to further its business goals on the internet.
    Layout practices which build bridges between technology needs and user needs to meet business goals are crucial to making this vision a reality. Experience designers all, content strategists, programmers, and information architects have a part to play in providing and designing content solutions that are successful structured.

    Google Structured Data Testing tool, showing the markup for Dr. Ruhlman's profile page on the left half of the screen, and the structured data attributes and values for the structured content on that page on the right half of the screen.

    If we run Dr. Ruhlman’s Swedish Hospital profile site via Google’s Structured Data Testing Tool, we could see that content about him is structured as small, different elements, each of which can be marked up with descriptive types and attributes that communicate both the meaning of those traits’ values and the way that they fit together as a whole–all in a machine-readable format.

Along with locating and excerpting info, such as recipe measures or parking ticket payment choices, search and software agent algorithms now today aggregate content from multiple sources by using linked data.

Google search results page for Dr. Donion, showing a list of standard links for Dr. Donion, and a 'Did you mean: Dr Stacy Donlon MD' link at the top. There is a Google info box, as with the previous search results page example. But in this case the box does not display information about the doctor we searched for, Dr. Donion, but rather for 'Kaiser Permanente Orthopedics: Morris Joseph MD.'

In late 2016, Gartner predicted that 30 percent of internet browsing sessions would be achieved without a display by 2020. Even though there’s recent signs to imply the 2020 picture might be more complicated than those broad-strokes projections imply, we’re already seeing the effect that voice search, artificial intelligence, and smart software agents like Alexa and Google Assistant are creating about the way information can be found and consumed on the internet.

Google Assistant app on iPhone with the results of a “what time does dr. ruhlman office close” query. The results displayed include a card with “8:30AM–5:00PM” and the label, “Dr. Ruhlman Scott MD, Tuesday hours,” as well as links to call the office, search on Google, get directions, and visit a website. Additionally, there are four buttons labeled with the words “directions,” “phone number,” and “address,” and a thumbs-up emoji.

Not one of the links supplied in this Google Assistant results take me straight to the”How to Purchase a Parking Ticket” page, nor do the descriptions definitely let me know I’m on the right path. (I did not ask about requesting a hearing) This is due to the fact that the content on the City of Boston parking ticket page is styled to communicate content relationships visually to readers but is not structured in a way that conveys those relationships to algorithms that are curious.
I easily understand what my choices are for paying as this page being read by a human I will pay online, in person, on the telephone, or by email. However, things get a little confusing if I request Google Assistant how to pay a parking ticket in Boston:
By conveying in a context that includes inference and aggregation, organizations are able to speak to their customers where users are, be it on a web site, a search engine results page, or a voice-controlled digital helper. They’re also able to keep control over the truth of their messages by ensuring that the proper content are available and communicated across contexts.

The very first result, nevertheless, suggests that smart brokers may be at least partially susceptible to the exact same accessibility heuristic that affects humans, wherein the advice that’s easiest to recall frequently seems the most correct.
Although each of these elements would look the same to a human the machine reads an enormous difference. While semantic HTML can be theoretically supported by WYSIWYG text entry fields, in practice they fall prey to the idiosyncrasies of even the very well-intentioned content authors. By making meaningful content structure that a core element of a website’s content management system, organizations may produce semantically correct HTML every time, for every component. This is the base that makes it feasible to capitalize on the relationship descriptions afforded by data.
The City of Seattle’s”Pay My Site” page, even though it lacks the polished visual design of Boston’s site, also communicates parking ticket options obviously to human visitors:

The model of expecting users parse and to discover those pages to answer queries and building pages , though time-tested in the age, is quickly becoming insufficient for effective communication. From engaging in patterns of information discovery and seeking, it precludes organizations. Andas we saw in the event of searching for information about doctors –it may lead software agents to make inferences based on information that is incorrect or insufficient , potentially routing customers to rivals who communicate efficiently.

Google search results page for Scott Ruhlman, MD, showing a list of standard links and an info box with an image, a map, ratings, an address, and reviews information.

Semantic HTML is markup that communicates information about the relationships between document elements, instead of simply describing how they ought to look on screen.

Getting started: that and how

HTML markup which concentrates just on the presentational aspects of a”page” may look perfectly fine to a human reader but be completely illegible into an algorithm. If I Wish to find advice about how to pay a parking ticket, a link in the home page takes me straight to the”How to Purchase a Parking Ticket” screen (scrolled to reveal detail):
In this instance, we can see that Google is able to find plenty of connections to Dr. Donion in its own typical index outcomes, but it isn’t able to”understand” the data about those sources well enough to present an aggregated result. In this case, that the Knowledge Graph understands Dr. Donion is a Kaiser Permanente doctor, but it pulls at the wrong location and the incorrect doctor’s title in its endeavor to construct a Knowledge Graph display.

The Use of structured articles

While this usage of semantic HTML presents distinct advantages over the”page display” styling we found on the Town of Boston’s website, the Seattle page also reveals a weakness that’s typical of guide approaches to semantic HTML. You will notice that, in the Google Assistant outcomes, the”Pay by Phone” option we found on the web page was not recorded. This irregularity in arrangement could be what is causing Google Assistant to omit this option .

Google search results info box for Dr. Ruhlman, showing an photo; a map; ratings; an address; reviews; buttons to ask a question, leave a review, and add a photo; and other people searched for.

You will also observe that although Dr. Stacey Donion is an specific match in all of the listed search results–which can be numerous enough to fulfill the first results page–we’re shown a”did you mean” connection for another doctor. Multicare does, nevertheless, provide semantic and linked data-rich profiles.
In a layout process, the connections between content chunks are defined and described. This creates both the material chunks and the connections between them legible into algorithms. Algorithms can then interpret a content package as the”webpage” I’m searching for–or remix and adapt that same content to give me a list of instructions, the amount of celebrities on a review, the amount of time left before an office shuts, and some variety of other succinct answers to specific queries.
The increasing prevalence of voice for a manner of access to data makes supplying structured, machine-intelligible content more significant. Smart software agents and voice are not preventing users from their computer keyboards, they’re changing user behavior. According to LSA Insider, there are many important differences between voice queries and typed questions. Voice questions often be:
Linked data expands the fundamental capacities of semantic HTML by describing not just what kind of thing a page element is (“Pay My Ticket” is an

), but in addition the real-world concept that item represents: that

signifies a”cover activity,” which inherits the structural characteristics of”trade actions” (the exchange of goods and services for cash ) and”actions” (activities carried out by an agent upon an object). Connected data generates a more nuanced description of the relationship between page components, and it provides the structural and conceptual information that algorithms need to bring data together.
There’s not enough proof in this small sample to support a wide claim that calculations have”cognitive” prejudice, but even if we allow for potentially confounding variables, we can see the compounding problems we risk by ignoring structured content. Regardless, the Kaiser Permanente outcome we are given above for Dr. Donion is to get the wrong doctor. What’s more, in the Google Assistant voice hunt, the discussion format doesn’t verify whether we meant Dr. Donlon; it just provides us with her facility’s contact information. In such cases, providing clear content may only work to our benefit.

Voice queries and articles inference