I have been using Schema.org to markup a FAQ section inside my articles. One year ago the Google Structured Data Testing Tool was not showing any error. However now show 2 errors.
Question:
name - A value for the name field is required.
WebPage / FAQPage
mainEntity - A value for the mainEntity field is required.
The Microdata I am using is:
<div itemscope itemtype="http://schema.org/Question">
<div itemprop="text">
<main itemscope itemtype="http://schema.org/WebPage http://schema.org/FAQPage">
</main>
QUESTION
</div>
<div itemprop="acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER</div>
</div>
</div>
Any idea how to solve this problem?
I finally solved like this:
<div itemscope itemtype="http://schema.org/FAQPage">
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
<div itemprop="name">QUESTION</div>
<div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER</div>
</div>
</div>
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
<div itemprop="name">QUESTION2</div>
<div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER2</div>
</div>
</div>
</div>
Google sometimes changes some requirements for the structured data, here you can only be on the safe side if you test it regularly. In your case it seems that the Question itself is missing for google: At least the first error is easily fixed, I tried fixing the FAQPage error but somehow I couldn't get it yet. I will try a bit more and edit my question if I find a good solution!
Edit: I couldn't get it to work fully but what I found out so far: Here is a FAQ Page example from google itself, it seems you have to wrap the faqPage around all questions. And have the mainEntity of type Question. Maybe with this example you can change your markup to get the desired result.
<div itemscope itemtype="http://schema.org/Question">
<div itemprop="text">
<div itemscope itemtype="http://schema.org/WebPage http://schema.org/FAQPage">
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
</div>
</div>
<span itemprop="name">QUESTION</span>
</div>
<div itemprop="acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER</div>
</div>
</div>
For regular automated testing, I would recommend using the screaming frog program in which you can connect an API for SDTT. At one time we solved a similar problem by adding itemprop = "name" to the questions. Below is an example of a page where the validator has no comments at the moment: https://fixly.pl/kategoria/pozostale-uslugi-tapicerskie/radomsko .
Example of code:
<div class="l4Category__seo">
<div class="l4Category__seoText">
<div itemscope="" itemtype="https://schema.org/FAQPage">
<div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">question</h3>
<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p style="text-align:justify">The answer</p>
</div>
</div>
</div>
<div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">question</h3>
<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p style="text-align:justify">The answer</p>
</div>
</div>
</div>
<div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">question</h3>
<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p style="text-align:justify">The answer</p>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I tried to format my HTML Selection of HTML Elements in Compact View I tried too many Visual Studio Extension but none of them working like Ctrl + J and Prettify so on
Here is the example of my code look likes
<div class="example">
<div class="section">
<div class="widget">
<div class="title">
<h3 class="title">I am a developer</h3>
</div>
</div>
</div>
</div>
I need Like this Below
<div class="example"><div class="section">
<div class="widget">
<div class="title"><h3 class="title">I am a developer</h3></div>
</div></div></div>
Like above this format there is too much code I need to format with help of any extension in VS code if possible Suggest me
Any Help is Highly Appreciated
it is always good to format your code well using indentation. This helps one identify parent and child elements especially when an element has more than to child elements.
e.g.
<div class="example">
<div class="section">
<div class="widget">
<div class="title">
<h3 class="title">I am a developer</h3>
</div>
</div>
</div>
</div>
I'm trying to figure out why my small static webpage isn't showing up properly when viewed on mobile (noticed on Chrome android app). According to the docs, the columns should automatically stack on mobile. But, when I view it I see a normal view of the page with the width fitting correctly to the screen, but the columns stay in one row. Shown in the below screenshot.
I tested to see if it's my code by resizing the page on a desktop browser and the page responded as expected, stacking the cards so in a single column. Here's a desktop-view imitated on my phone.
Any idea what's going on? What am I doing wrong? Here's the code
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css"/>
</head>
<body style="background-color:#00aced;">
<div class="container">
<div class="notification" style="background-color:#fff">
<strong>Remember:</strong> In order to continually receive updates, please install the GoodSamarit4n repository from
here. This is the <em>only</em> official source. The reason I am providing links to the add-on zips is for complete transparency and for those who would like to study and learn from the code.
<br>
</div>
</div>
<div style="padding: 20px;" class="container">
<div class="columns">
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/githubforkodi.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Githubforkodi
</p>
</header>
<div class="card-content">
<div class="content">
A kodi program add-on for managing your github account. View repos, branches, notifications, Open/Close/Comment on issues, Merge/Deny pull requests, Get real-time notifications, And much more! The power of github combined with the simplicity of kodi.
Creator #goodsamarit4n. <a>#kodi</a> <a>#github</a> <a>#program</a> <a>#add-on</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/pugdonut.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Squeee!
</p>
</header>
<div class="card-content">
<div class="content">
A kodi video add-on that provides cute, funny, and heartwarming animal videos from all over the internet. Skip the endless clicking around your favorite sites and let Squeee! bring all of those sites to you in an easy-to-digest fashion. Click through videos one at a time or play an entire playlist and just sit back and embrace the fluffy.
Creator #goodsamarit4n. <a>#kodi</a> <a>#squeee</a> <a>#video</a> <a>#add-on</a> <a>#cute</a> <a>#animals</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/illuminati.jpg" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Alternative Facts
</p>
</header>
<div class="card-content">
<div class="content">
Get ready to get beligerantly angry or find yourself continually muttering "What the f###?" under your breath. For those who enjoy seeing just how crazy some folks are. With documentaries on conspiracy theories gathered from all over the web. If you don't see a topic, feel free to tweet at me and I'll see about adding it for you.
Creator #goodsamarit4n. <a>#kodi</a> <a>#alternativefacts</a> <a>#video</a> <a>#add-on</a> <a>#conspiracy</a> <a>#theories</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Adding the following meta tag may solves the problem.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I would like to select only the p tag without any attributes from the following html code.
<div id="review">
<div class="partial_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p class="partial_entry>it was a good...</p>
</div>
</div>
</div>
</div>
<div class="full_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p>it was a good trip.</p>
</div>
</div>
</div>
</div>
</div>
I have tried //div[#class='entry']/p[not class = 'partial_entry']/text(). But, its not working.
If you want all p elements with no attributes at all then the simplest path would be
//p[not(#*)]
If you want to check for the absence of class specifically then
//p[not(#class)]
With this snippet of HTML, the topmost google link is included in every element under it when shown in Firefox and Chrome.
<div>
<a href="http://www.google.com/">
<div>
<div>
<div>
<div>
<a>a tag</a>
</div>
<img />
<h3>a title</h3>
<p>a description</p>
<div>a detail</div>
</div>
</div>
</div>
</a>
</div>
What is causing this parsing issue and how can I fix it?
Try dropping the following document into the W3C Validator:
<!DOCTYPE html>
<html>
<head>
<title>Parse error?</title>
</head>
<body>
<div class="g23">
<a href="http://www.google.com/">
<div class="article-bg">
<div class="splash-border-right">
<div class="splash-content-margin">
<div>
a tag
</div>
<img src="http://www.google.com/image.jpg" />
<h3 class="splash">a title</h3>
<p>a description.</p>
<div class="read-time">a min</div>
</div>
</div>
</div>
</a>
</div>
</body>
</html>
Observe that this document is not valid HTML5. The first error:
Line 13, Column 65: An a start tag seen but an element of the same type was already open.
That is, a tags must not include other a tags. According to Alohci in the comments, Chrome and Firefox's behavior matches the HTML5 spec's adoption agency algorithm for this scenario. It's funky, but, with invalid code, funky results are to be expected.
I receive this error when using the W3C Validator. I also noticed that my footer content disappears in IE8 and I'm wondering if this will fix it.
<aside class="footer-sidebar-widget four columns">
<h4>Call Us Today</h4>
<div class="textwidget">
<h4 style="color:#fff;">773-376-ROLL (7655)</h4>
</div>
</aside>
<aside class="footer-sidebar-widget four columns">
<div class="textwidget">
<div id="right-footer-wrap">
<div id="right-footer-content">
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name"><strong>Rolling Reefers</strong></span>
<br />
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">3535 S Kostner Ave., Suite 101</span>
<br />
<span itemprop="addressLocality">Chicago</span>, <span itemprop="addressRegion">IL</span> <span itemprop="postalCode">60632</span>
<br />
<span itemprop="telephone">(773) 376-7655</span>
</div>
</div>
</div>
</div>
</aside>
Website: Rolling Reefers
You have an open <div> in the second aside. Adding another </div> before the last </aside> should fix it.
To avoid issues like this, it helps to use an editor that will automatically close the HTML tags for you, like Dreamweaver. Or, at least, properly indent your code so you could see when the lines don't match up exactly, and that's where you know you're either missing something or have an extra element.
<aside class="footer-sidebar-widget four columns">
<div class="textwidget">
<div id="right-footer-wrap">
<div id="right-footer-content">
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name"><strong>Rolling Reefers</strong></span>
<br />
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">3535 S Kostner Ave., Suite 101</span>
<br />
<span itemprop="addressLocality">Chicago</span>, <span itemprop="addressRegion">IL</span> <span itemprop="postalCode">60632</span>
<br />
<span itemprop="telephone">(773) 376-7655</span>
**<!-- YOU'RE MISSING A CLOSING /div RIGHT HERE -->**
</div><!-- end itemscope wrapper -->
</div><!-- end .right-footer-content -->
</div><!-- end .right-footer-wrap -->
</div><!-- end .textwidget -->
</aside>