I have the following RDFa rich snippet at the top of a web page (ref: https://support.google.com/webmasters/answer/146645?hl=en#aggregate):
<div class="site-reviews">
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate">
<span property="v:itemreviewed">[Product]</span>
<span rel="v:rating">
<span typeof="v:Rating">
<span property="v:average">5</span>
out of
<span property="v:best">5</span>
</span>
</span>
based on
<span property="v:votes">8</span> votes.
</div>
</div>
However, rather than showing the usual stars in the search result, it displays the text result "[Product] 5 out of 5 based on 462 votes." as the meta-description. Where am I going wrong?
*UPDATE (anonymised) google search result below:
Related
This question already has answers here:
How do I scrape ::before element in a website using selenium python
(2 answers)
Closed 3 years ago.
This is the website https://www.justdial.com/Hyderabad/Wedding-Photographers/nct-10989300, i need to reach phone numbers given on website, but phone number is available on website but when i reach it using the inspect element method nothing is shown in inspect element. I need it to extract phone numbers using xpath.
I need to extract number using xpath, but xpath returns empty string.
//p[#class='contact-info ']/span/a
xpath should be returning phone number string but it seems its hidden by some way.
Because it shows like icons.
See in code:
<p class="contact-info " onclick="_ct('clntphn', 'lspg','','040PXX40.XX40.131020024501.A6E5');">
<i class="res_contactic resultimg"></i>
<span><a><b>
<span class="mobilesv icon-dc"></span>
<span class="mobilesv icon-fe"></span>
<span class="mobilesv icon-ji"></span>
<span class="mobilesv icon-yz"></span>
<span class="mobilesv icon-hg"></span>
<span class="mobilesv icon-ba"></span>
<span class="mobilesv icon-ji"></span>
<span class="mobilesv icon-yz"></span>
<span class="mobilesv icon-rq"></span>
<span class="mobilesv icon-wx"></span>
<span class="mobilesv icon-ts"></span>
<span class="mobilesv icon-nm"></span>
<span class="mobilesv icon-vu"></span>
<span class="mobilesv icon-ts"></span>
<span class="mobilesv icon-acb"></span>
<span class="mobilesv icon-yz"></span>
</b></a></span>
That "mobilesv icon-ts" are actuell your numbers. Just looks for .css icon library for it.
I am using <span class="class-name"></span> repeatedly in my project. Something like this:
...
<span class="class-name"></span>
Some text generated here
<span class="class-name"></span>
Some text generated here
<span class="class-name"></span>
...
The purpose of the <span>is to have a padding-right so the text after it will be displayed nicer.
The problem is Chrome Browser can not render the empty <span> so it converts it to something like this:
<span class="class-name">
Some text generated here
<span class="class-name">
Some text generated here
<span class="class-name">
</span>
</span>
</span>
Which this will not result in the output I am looking for. Because the paddings will be mixed up.
The interesting thing is if you add a character like between the tags, the first view will be rendered by the browser and the problem is gone.
Could anyone please explain why its working like this?
had some trouble reproducing the bug, but that code seems to produce it
<span class="class-name"/>
<p>Some text generated here</p>
<span class="class-name"/>
<p>Some text generated here</p>
<span class="class-name"/>
your code however works perfetly fine for me, are you sure you are as verbose or did you used the xhtml tag closing
<span style="color:green"><span style="color:red"/>
If it's red, it's HTML. Green is XHTML.
</span>
Im currently working on a leaderboard demo where a player has a number of games, points and a ratio of points/games. On top of my leaderboards I want a line which shows what is beneath.
<h2>{{title}}</h2>
<ul class="leaderboard">
<li>
<span class="badge">Rank</span> Name
<div class="wrapper"[ngSwitch]="type">
<span *ngSwitchCase="'games'" class="points">Games</span>
<span *ngSwitchCase="'points'" class="points">Points</span>
<span *ngSwitchCase="'ratio'" class="points">Ratio</span>
<div class="wrapper" *ngSwitchDefault>
<span class="points">Ratio</span>
<span class="points">Points</span>
<span class="points">Games</span>
</div>
</div>
</li>
</ul>
I think the second div with ngSwitchDefault is the Problem. But I am relatively new to Angular 2 and its usage with html. How can i deal with that in one html?
Here is a plunker with switch working, the single quotes are ok (my bad).
enter code here
https://plnkr.co/edit/1FWbbWiLX1EGsm6Pe9YA?p=preview
I am trying to use angular truncate to truncate some elements. I know how to truncate words by {{something.something | characters:50}}. But what i want to do is, for example, i have a bold text <b> Comfortable </b> and then i have 3 other features listed <span> Air conditioned </span>
<span> Safe </span>
<span> Fast </span>
I want to add a read me button.
Now what i want basically is only the "Comfortable" will be visible at first but when someone click the read more button it will be expanded and show the rest 3 . How can i do that? I dont want to use jQuery here. Can this be done in angular?
Pretty easy to achieve. You should initialize the readmore in your controller also.
<div>
<span >Comfortable</span>
<span ng-show="readmore"> Air conditioned </span>
<span ng-show="readmore"> Safe </span>
<span ng-show="readmore"> Fast </span>
<div ng-hide="readmore" ng-click="readmore = true">Read more</div>
<div ng-show="readmore" ng-click="readmore = false">Read less</div>
</div>
If possible put this tag to cover all your span (except Bold one)
<a ng-click="isShowMore = !isShowMore" ng-hide="isShowMore">Show More</a>
<div ng-show="isShowMore">
<span> Air conditioned </span>
</div>
<a ng-click="isShowMore = !isShowMore" ng-show="isShowMore">Show Less</a>
You can simply use ng-hide , ng-show or ng-if.
<b> Comfortable </b>
<button ng-click="visible = true">Read More...</button>
<div ng-show="visible">
<span>...</span>
<span>...</span>
<span>...</span>
</div>
I checked many different sites (official one also) and all the examples display the google snippets code itemscope/itemtype inside a div and the itemprop inside a span.
I'm wondering if this is just a simple way to show samples code or is the only way yo display it.
I have my address in a list so i wrote like this:
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<i class="fa fa-map-marker fa-lg"></i> <p class="labelSocial">Address:</p>
<a href="https://www.google.com/maps/place/Glogauer+Stra%C3%9Fe+21/#52.49226,13.4369,17z/data=!3m1!4b1!4m2!3m1!1s0x47a84fb24234006b:0x36dfe942fb2b5f97" target="_blank">
<p class="addressText">
<span itemprop="streetAddress"> Glougauerstrasse 21, </span> </br>
<span itemprop="postalCode"> 12435 </span>
<span itemprop="addressLocality"> - Berlin </span>
<span itemprop="addressCountry"> (DE) </span>
</p></a>
</li>
is that also correct?
Your Code is fine but you'll have to nest schema.org/PostalAddress under some main category but use of <li> tag is correct. Here is what Google Structured Data testing tools shows for the code you mentioned above-
http://www.google.com/webmasters/tools/richsnippets?q=uploaded:800501214b811a6b2bbfb52e2d77f96d
In order to tell Google and other search engines that address is related to what, we must specify a category and nest postal address inside it. Please see the example, schema.org/PostalAdsress is nested inside LocalBusiness schema:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1><span itemprop="name">Beachwalk Beachwear & Giftware</span></h1>
<span itemprop="description"> A superb collection of fine gifts and clothing
to accent your stay in Mexico Beach.</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">3102 Highway 98</span>
<span itemprop="addressLocality">Mexico Beach</span>,
<span itemprop="addressRegion">FL</span>
</div>
Phone: <span itemprop="telephone">850-648-4200</span>
</div>