I am using microformat for the first time.
So as examples given on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=164506, I changed the code.
This is the existing code that was present on the page:
<div class="evD mr10">
<div class="imgH fl"><img /></div>
<div class="infAr">
<h3>EVENT NAME</h3>
<h4><span>at</span>VENUE NAME</h4>
<p>Event Description</p>
<a class="tdd" href="#">Genre</a>
</div>
<div class="dth">
<div class="sfrD fl">
</div>
<div class="strE sn fl">
</div>
<div class="Buy">
<a class="bkT" href="buy_link"></a>
</div>
</div>
</div>
The Changes I made include :
Change the doctype to html5, and added microformat classes.
<div class="vevent evD mr10">
<div class="imgH fl"><img class="photo" /></div>
<div class="infAr">
<h3><a class="url summary" href="event_URL">EVENT NAME</a></h3>
<h4 class="location"><span>at</span>VENUE NAME</h4>
<p class="description">Event Description</p>
Genre
</div>
<div class="dth">
<div class="dtstart frD fl">DATE_START<span class="value-title" title="Date in ISO"></span></div>
<div class="dtend strE sn fl"><span class="value-title" title="Date in ISO"></span></div>
<div class="Buy tickets">
<a class="bkT offerurl" href="buy_link"></a>
</div>
</div>
</div>
I have the following questions/doubts :
Is it ok to have existing classes alongwith the microformat tags as done above?
As mentioned on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1093493#usage, it is not allowed to have display:none on the content. However, I pass the data set and paginate using javascript, in which I show the relevant data. So how do I make sure that these is not ignored.
I load the images which are on the current page, leaving the src as blank, and later change the src, as the page is changed. So initally the event's photo is blank.
How do I counter from a search engine reading as blank.
Thank you.
(Sorry about the question being so long)
1) that is no problem. You can even combine multiple types of semantic markup on the same tags.
2) 3)
If the data is hidden and in JavaScript/AJAX then it is highly unlikely Google will see it.
You may have to restructure your architecture to make your content crawlable. That's a big subject. I suggest looking up "progressive enhancement" which is the method I currently think is best.
Related
Let's say I have a product within a collection. Is it appropriate to call the product "feature-collection__product" so it's still an element within the block of "feature-collection" or call it "feature-collection-product" so it becomes it's own block, as it has other elements within it, or something different.
<div class="feature-collection">
<div class="feature-collection__product">
<h2 class="feature-collection__product-title"></h2>
<h2 class="feature-collection__product-price"></h2>
</div>
</div>
OR
<div class="feature-collection">
<div class="feature-collection-product">
<h2 class="feature-collection-product__title"></h2>
<h2 class="feature-collection-product__price"></h2>
</div>
</div>
Most likely the correct answer is both:
<div class="feature-collection">
<div class="feature-collection__product product">
<h2 class="product__title"></h2>
<h2 class="product__price"></h2>
</div>
</div>
The situation when you have different entities on the same DOM node is called mix. In this case it's reasonable to have independent block product and also an element of feature-collection to set some styling for production inside feature-collection.
For more info about mixes please take a look at https://en.bem.info/methodology/key-concepts/#mix and https://en.bem.info/methodology/faq/#mixes
Hopefully what I am looking to do makes some sense.
I am working on a project that will hopefully simplify an existing tool that is used on a regular basis. It is highly outdated both in style and language. What I have done so far as designed a sample layout to test the functionality of this tool. The HTML and CSS code is here for view as it does not display well as embedded html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-container w3-black w3-center">
<h2 class="w3-text-red">Tool</h2>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<div class="w3-container">
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">A***0</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container w3-card-8">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<p>Name:</p>
<p>Service 1:</p>
<p>Service 2:</p>
<p>Service 3:</p>
<p>Service 4:</p>
<p>Devices:</p>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<a target="_blank" href="#"><img src="" alt="Device 1"></a>
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 2">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 3">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 4">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<a target="_blank" href="#"><img src="" alt="Device 5"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When this is run in Chrome (used as corporate settings for IE block some code) you get a very small sample of the page (again simple testing purpose here).
This is using straight HTML/CSS3 to bring up a page with buttons. When the buttons are clicked the bring up a MODAL that will display specific information. As of now all the tags are very generic as this is for work and certain info is proprietary. What I am looking to do (again simple, needed only for testing) is when the button is clicked to bring up the MODAL that info will be passed from a database to fill in the info for that specific listing in the MODAL.
Example: Service 1 in MODAL needs to pull info from a database for a specific client/customer.
I am looking for the easiest way to do this on a local machine. I am not looking for building the entire database or deploying on corporate servers at that is way above my pay-grade and experience.
I currently have very limited experience in asp.net MVC4 and SQL (Meaning I have just started learning both and have completed the MVC Music Store Tutorial) So I think that I could build something with that but wanted to know if there was an easier way to do so with just html/css and possibly MSACCESS as I have access to that while working.
I am currently building the DB in ACCESS and that should be done in the next day or so depending on how busy I am with my other job functions.
Any assistance would be greatly appreciated. Thank you all for you time.
Edit: Is this possible using JavaScript and a Database file or would i definitively need to be running some type of server (even IIS) to make this possible. I am very limited in the tools I have on my work system.
HTML and CSS deal with presentation and layout, comprising the front-end. Your database and application language of choice (C#, PHP, etc) comprise the back-end.
It sounds like you would want to either develop this as an MVC project or use JavaScript to perform AJAX requests. The AJAX request would receive data from some sort of controller action or application page and display it where you want.
There are lots of different ways of getting and manipulating data; it's all very subjective and depends on your requirements. This is a question that you will need to answer on your own.
After readings on schema.org I wrote a small "rich snippet" or what ever it is called. We were found today by google, but no stars and ratings were shown. Maybe someone has expierence with it and know how things are done? Does it only depends on microdata or also on anything else in <head> tags? Otherwise what is wrong with my snippet?
Here is my snippet:
<div itemscope itemtype="http://schema.org/Organization">
<div class="row">
<div class="col-sm-6">
<div class="clogo-container">
<img src="logo.jpg" alt="logo" class="logo" />
</div>
<div class="infos">
<span class="website">https://localhost</span><br/>
is a page made by<br/>
<br/>
<span class="name" itemprop="name"><b>Mypage</b></span><br/>
</div>
</div>
<div class="col-sm-6">
<div class="rate" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="ratingbox">
<img src="image.jpg" alt="Logo" />
<b><span class="name">Mypage</span></b>
<div class="main-rating" id="customer-1-rate"></div>
<span class="vote">
<span itemprop="ratingValue">4.44</span>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1"/>
/ 5.00</span><br/>
<span class="total">out of
<span itemprop="ratingCount">34</span>
total</span>
</div>
</div>
</div>
</div>
</div>
Your use of Microdata and Schema.org seems to be fine, and Google’s SDTT reports no issues and says that you provide all necessary data for their Aggregate Ratings Rich Snippet. So technically everything seems to be correct.
That means the issue (that you don’t see a Rich Snippet for your result) probably has to do with Google’s policies. There are various possible reasons why a search result feature doesn’t get displayed for a result. And note that they never guarantee displaying one, even if everything is correct.
Typical (but not the only) reasons:
You have to wait longer. It can take a long time (after indexing) until Rich Snippets appear.
You checked the search result for your homepage (or you only have this markup on your homepage). Google doesn’t show Rich Snippets for homepages.
Your page content doesn’t "look like" it contains aggregated ratings, or your hide them visually.
I have some lengthy HTML which is over the 80 character limit for my project. We have a style guide which restricts the number of characters per line, which is good because right now the line runs so long that you can't see it all without scrolling right.
<div id="email-signup-container">
<div id="mc_embed_signup">
<div class="interested">
<div class="container">
<div class="left col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3>Help New York residents keep the heat on this winter.</h3>
DONATE
</div>
<div class="right col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h3>Without heat? Visit our resources page.</h3>
<a class="btn-interest" href="resources">RESOURCES</a>
</div>
</div>
</div>
</div>
</div>
Unfortunately, I can't find any style guides that cover multilining HTML. I worked on one project where we newlined things by attribute, but it was controversial:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest">DONATE</a>
Some people wanted the closing carot on a new line like this:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest"
>DONATE</a>
Other people wanted the closing tag at the same level as the opening tag:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest"
>
DONATE
</a>
I kind of hate all of them. Can anyone point to any published style guides that cover this so we can just adopt one and move on?
I've been wondering this as well. The only thing I could find was the guide from GoCardless, which says:
<!-- Try using line-breaks for multiple attributes, keeping the first attribute
on the tag's opening line -->
Good:
<div custom-attribute
class="something"
role="something-else"></div>
<!-- The closing tag ^^^ can stay on the same line for empty elements-->
<div custom-attribute
class="something"
role="something-else">
··Foo <!-- Otherwise nest plz -->
</div>
Not a definite answer, but I would like to add another suggestion: indenting the attributes twice, and the content only once.
An example:
<a
href="http://www.nycharities.org/donate/charitydonate.asp?ID=4081"
class="donate-btn btn-interest">
DONATE
</a>
For an a tag this kind of looks weird, but for longer tag-names, as are common in Angular, it looks fine:
<my-component
attribute1="val"
attribute2="val2"
attribute3="etc">
<span>Hello :)</span>
</my-component>
For those veterans who haven't tried Hpple, it's great. It uses Xpath for searching through HTML/XML documents. It gets the job done and it's easy enough for a newbie like me to understand. However, I'm having trouble.
I have this chunk of HTML:
<ul class="challengesList dailyChallengesList">
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl00_challengeImage" title="Gunslinger" src="/images/reachstats/challenges/0.png" alt="Gunslinger" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl00_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1500cR</p>
</div>
<h5>Gunslinger</h5>
<p class="description">Kill 150 enemies in multiplayer Matchmaking.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl00_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl00_progressBar" class="bar" style="width:21%;"><span></span></div>
<p>31/150</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl01_challengeImage" title="A Great Friend" src="/images/reachstats/challenges/0.png" alt="A Great Friend" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl01_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1400cR</p>
</div>
<h5>A Great Friend</h5>
<p class="description">Earn 15 assists today in multiplayer Matchmaking.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl01_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl01_progressBar" class="bar" style="width:40%;"><span></span></div>
<p>6/15</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl02_challengeImage" title="Cannon Fodder" src="/images/reachstats/challenges/2.png" alt="Cannon Fodder" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl02_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1000cR</p>
</div>
<h5>Cannon Fodder</h5>
<p class="description">Kill 50 infantry-class foes in the Campaign today.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl02_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl02_progressBar" class="bar" style="width:0%;"><span></span></div>
<p>0/50</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
<li>
<div class="corner topLeft"></div>
<img id="ctl00_mainContent_dailyChallengesRepeater_ctl03_challengeImage" title="Heroic Demon" src="/images/reachstats/challenges/3.png" alt="Heroic Demon" style="border-width:0px;">
<div class="info">
<div class="rFloat">
<p id="ctl00_mainContent_dailyChallengesRepeater_ctl03_challengeExpiration" class="timeDisplay dailyExpirationCountdown"><span>0d</span><span>19h</span><span>9m</span><span class="seconds">37s</span></p>
<p>1500cR</p>
</div>
<h5>Heroic Demon</h5>
<p class="description">Kill 30 Elites in Firefight Matchmaking on Heroic or harder.</p>
<div class="reward">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl03_progressBox" class="barContainer">
<div id="ctl00_mainContent_dailyChallengesRepeater_ctl03_progressBar" class="bar" style="width:0%;"><span></span></div>
<p>0/30</p>
</div>
</div>
</div>
<div class="clear"></div>
</li>
</ul>
The nutty part is, I cannot get Hpple to "see" the <div class="reward">. I'm using the following to find it:
NSArray * rawProgress = [doc search:#"//ul[#class='challengesList']
/li/div[#class='info']
/div[#class='reward']/p"];
This always returns an empty array. It's driving me nuts, as the same kind of thing worked for all of the other elements in this project...
Any help would be appreciated :)
EDIT
This works:
NSArray * rawDescriptions = [doc search:#"//ul[#class='challengesList']
/li/div[#class='info']
/p[#class='description']"];
This doesn't:
NSArray * rawProgress = [doc search:#"//ul[#class='challengesList']
/li/div[#class='info']
/div[#class='reward']
/div[#id]//p"];
Furthermore, trying to list the child nodes of rFloat or reward produces a crash :(
Your "p" element is not an immediate child of div class="reward".
Using XML you provided, XPath expression
div[#class='info']/div[#class='reward']//p
will work.
See this SO question for a similar report on problems with Hpple and a list of alternatives.
You may be seeing a bug. According to this page,
It's classified as an experimental
project by the developer, but so far
it's "worked for me"
UPDATE: seems to be kinda broken now.
Anyone got a better solution?
You may want to enter a bug report, and if the project is still being maintained, maybe the developer will respond with a fix or solution. Or you could leave a comment on this page that recommended hpple, and see if that blogger or one of his readers can address the problem or tell you if hpple is active at all.
You could also see if you can find HyperParser. "It's a simple HTML parser that has API similar to NSXMLParser. Designed specially to parse semi-valid HTML." But it doesn't seem to be there at the link where it used to be.