When adding schema data to your site for SEO, it seems like a no-brainer to keep all your schema data within one itemscope. Or at least on the same page with redundant itemscopes of the same type.
But let's say I'm following a style guide and only display certain properties on the site (e.g. not enough room in the footer to list all the item properties). Yet, I still want this information to show up in a search engine (e.g. hours of operation or a Google Map).
If I have a footer using the HealthAndBeautyBusiness schema data but only want to show some of the fields, is it okay to just list them and apply class="visuallyhidden" to the item properties I don't want to display?
<div class="contact_info" itemscope itemtype="http://schema.org/HealthAndBeautyBusiness">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p itemprop="streetAddress"></p>
<p>
<span itemprop="addressLocality"></span>,
<span itemprop="addressRegion"></span>
<span itemprop="postalCode"></span>
</p>
</span>
<p itemprop="email" class="visuallyhidden"></p>
<p itemprop="telephone" class="visuallyhidden"></p>
</div>
In other words, is there a clearly defined way to distinguish between a malicious versus a proper use of the .visuallyhidden class?
Additional question: when a search engine crawls your site, does it crawl the entire site and store the aggregate schema data? Or does it treat schema data on each page as separate?
As far as Microdata and schema.org are concerned, this is valid.
Note that Microdata allows the use of meta and link elements in the body, which are typically hidden by default, especially for the purpose of adding properties for content that is not visible on the page.
Consumers (like search engines) might have additional rules about what they will ignore, what they will parse, what they will penalize, etc. However, discussing this is about SEO, which is off-topic here on Stack Overflow.
Related
Google Webmaster Tools is reporting Structured Data > hentry errors for my Wordpress site (Divi theme)
Missing: author
Missing: updated
When I check the page with Google's Structured Data Testing Tool, it contains the following markup
<p class="post-meta">
<span class="author vcard">
Author Name
</span>
<span class="published">Dec 1, 2016</span>
</p>
I have two questions:
What is wrong with this markup that is preventing the hentry author and
updated attributes from being detected? (or, where is a link to up-to-date markup requirements, Google searching reveals many variations).
The page also contains complete and error free JSON-LD structured
data. Are there any conflicts/ issues with having two structured
data formats on the same page?
1) I would recommend to use Microdata or JSON-LD to describe your objects
2) It is hard to make a proposition without seeing that. Also, it is not understandable what object you tries to describe.
Thanks
I am building a website using asp.net mvc-5, and I want to provide our company contact details such as telephone, email, postal address, etc.., so I used the <address> tag as follow inside our "Contact US" page (I replace the real data by ***):-
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 address">
<h2>Addresses</h2>
<address>
<div class="info">
<p><span class="footercolor">Telephone: </span><span>+******</span></p>
<p><span class="footercolor">FAX: </span><span class="marginfax">+*****</span></p>
<p class="mainaddress">3rd Floor, Bldg. 1(....),<br />... Str. .CityName</p>
<p><span class="footercolor">P</span>.<span class="footercolor">O</span>.<span class="footercolor">Box: </span><span>*****,**** 1212,CountryName</span></p>
<p><span class="footercolor">Email:</span><span> info#*****.com</span></p>
</div>
</address>
</div>
so I have a couple of questions about using the <address> tag:-
inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?
Is the <address> tag the correct way to provide our company's contact details as I am currently doing, or it should be used to provide details about the web site owner such as who created the web site and when ....
What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>?
When you should use an address tag
From the W3C (https://www.w3.org/TR/html-markup/address.html):
If an address element applies to a body element, then it represents
contact information for the document as a whole. If an address element
applies to a section of a document, then it represents contact
information for that section only.
In summary, an address tag is for contact information. If your contact information is just a phone number, then only the phone number should be included in the address block. If your contact information is a phone number(s), postal address, and e-mail as in your case, then all of this information (including the postal address) should be contained within the address block.
When you should NOT use an address tag
The point is, you should not be including a postal address in the address block if it is NOT contact information. So for example, if you have a real estate website, and you're listing information about available houses, the address of a house listing should not be in the address block. On the other hand, the real estate agent's address should be included in the address block, since this is contact information.
Why use the address tag
HTML is meant to be semantic. Ie/ you provide content and give meaning to that content. The more meaning you can give to the content, the better. Address conveys a lot more meaning than just div or p, so if address is appropriate, you should use address. In fact, here's what the W3C says about divs (https://www.w3.org/TR/html5/grouping-content.html#the-div-element):
Authors are strongly encouraged to view the div element as an element
of last resort, for when no other element is suitable. Use of more
appropriate elements instead of the div element leads to better
accessibility for readers and easier maintainability for authors.
Acceptable content within an address tag
Divs and Ps inside an address block are perfectly acceptable. More specifically, here's what you can use within an address block (from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address):
Flow content, but with no nested <address> element, no heading content
(<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), no sectioning content
(<article>, <aside>, <section>, <nav>), and no <header> or <footer>
element.
Divs and Ps are flow content.
tl;dr: Maybe you could make your code a little prettier. But regarding your usage of the address tag, you're good!
It might help to look at this answer about address formats
Advantages include semantic markup being easier for search engines to use.
By the way, you've got a lot more span tags in that sample than you actually need - you could remove most of the middle ones.
Let me see if I can answer all of your questions :), please note I'm not an HTML pro so I'm not 100% sure on everything.
inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?
Of course you can always write whatever you like, so if you want to include the postal code that's your call. There are no set rules to as of what you can do and what not.
Is the <address> tag the correct way to provide our company's contact details as i am currently doing?, or it should be used to provide details about the web site owner such as who created the web site and when ....
I don't think that there is a 'correct' way of using the <address> tag, as you are free to use it for whatever you like.
What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>???
https://stackoverflow.com/a/34862011/5806274, I think that he describes it pretty good, it's mostly easier for Search Engines such as Google.
I've pretty much spent all day configuring GTM (it takes forever) but I'm facing a situation which I don't know how to track:
Lets say there are many links, on many pages, they all have a url like this /xxx/yyy/zzz.
only zzz is changing. I have these links in different sections on the website.
When a user clicks a link I need to know what section and what page was this link DOM element was at. (or in GTM only target clicks for links in a specific section)
Example markup for homepage
<section class='A'>
<a href='/xxx/yyy/1'>link</a>
<a href='/xxx/yyy/2'>link</a>
<a href='/xxx/yyy/3'>link</a>
</section>
<section class='B'>
<a href='/xxx/yyy/1'>link</a>
<a href='/xxx/yyy/2'>link</a>
<a href='/xxx/yyy/3'>link</a>
</section>
I've read google's instructions carefully but they don't explain how to set up specific tracking, they only talk about general all-purpose tracking.
I don't want to use dataLayer.push() but I want the GTM system to handle everything for me, without changing the website code.
I would imagine GTM has some sort of event-delegated capabilities which could be used as rules to track links only on specific places, so more specific rules could be created.
Depending on the version of GTM you are using the terminology and steps might be different, but I'll outline how to handle this.
Set up an auto event macro named parentClass (or something simialr) to return the class of the parent element of the clicked element.
Set up a Link Click Listener to fire on all pages if you haven't already.
Set up a Google Analytics Event tag in GTM. Use the parentClass macro as the event label.
Set up a rule that fires when the GA Event tag when the URL contains the pattern you're looking for.
There are other ways to set this up and you may need to capture additional information, but this should get you going.
Is this possible an correct to have more than one element on a page marked with role="main" attribute?
There is a page with search results divided into portions. Portions are similar to pages, but a new portion appears on a page when more data came with AJAX.
I would like users of JAWS (and so on) understand the structure of the document and provide them with information that there is a search result page in front of them and it is divided into portions.
This markup is pronounced by JAWS exactly as I wish:
<div class="main" role="main" aria-label="Search results">
<div class="main__portion" role="main" aria-label="Page 1">
Link 1<br/>
Link 2
</div>
<div class="main__portion" role="main" aria-label="Page 2">
Link 1<br/>
Link 2
</div>
</div>
But is looks overheaddy to mark every single portion with role="main". Which role suits better? And the requirement is that JAWS has to read "Search results page 1" when focusing on the first link.
Marking each div as main will validate, but it doesn't provide useful information to a non-sighted user. Main is used to mark the primary content as distinct from secondary content, so using it on your outer div as you already have is appropriate. Putting it on all the inner divs as well just becomes noise and one more thing to listen to before they get to the actual content.
Screen reader users will find it more useful to know how many results there are in total and which one they're up to. This can be done using list markup, or giving a total at the top of the page then numbering each result as part of its title/heading/link text. As a general rule, any information which is obvious to a sighted user should also be present in the content or the markup, with ARIA only providing a fallback or additional support if necessary.
WAI-ARIA main role:
Within any document or application, the author SHOULD mark no more than one element with the main role.
But it’s a SHOULD, not a MUST.
(Note that HTML5’s main element may only be used one time in a document.)
I insert the below paragraph into the database .However while displaying it is displayed as (which is not desired one):
The use of this website is subject to the following terms of use: • The content of the pages of this website is for your general information and use only. It is subject to change without notice. • Neither we nor any third parties provide any warranty or guarantee as to the accuracy,
Desired paragraph view:
The use of this website is subject to the following terms of use:
• The content of the pages of this website is for your general information and use only. It is subject to change without notice.
• Neither we nor any third parties provide any warranty or guarantee as to the accuracy.
How can we achieve this in asp.net/C#
Insert the complete html into database and set into div as innerhtml
<div id="div" runat="server"></div>
div.InnerHtml = "paragraph from Database which saved as HTML";"
Use the paragraph tag.
<p>The use of this website is subject to the following terms of use:</p>
<p>• The content of the pages of this website is for your general information and use only. It is subject to change without notice. • Neither we nor any third parties provide any warranty or guarantee as to the accuracy.</p>
You may need to substitute your line feed/carriage return symbols with br tags before you put the text in the control. Or, possibly put the br tag into your paragraph text when its stored in the database.
To substitute, you can use String.Replace()
The character codes can be found here http://www.asciitable.com/
Look for character codes 10 and 13. You should check the text you're attempting to substitute, to find out if both codes are in the string, or just one of them.