Solved

Google Rich Snippets

Posted on 2013-10-22
11
384 Views
Last Modified: 2013-11-10
Hi,

I am trying to apply rich snippets into my webpage. The problem is my localBusiness schema contains some information. I also want to include a description and logo but they are on other parts of my html page so how can I include them. Something like this...
<div class="header"><img src="myLogo.png"/></div>
<div class="body">
<div class="description">Some descriptive text</div>
</div>
<div class="footerInfo" itemscope itemtype="http://schema.org/LocalBusiness"> 
   <h3 >Contact Details</h3>
   <div style="font-size:1.1em; margin-left:20px;">
       <span itemprop="name">My Company Ltd</span> 
       <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                                <span itemprop="streetAddress">25 Sycamore Rd</span>, <span itemprop="addressLocality">Deptford</span><br />
                                <span itemprop="addressRegion">London</span>, <span itemprop="postCode">SE18 1HH</span>.
                            </div>  
                            Tel:&nbsp;<span itemprop="telephone">+44 (0) 01250 224 663</span>
                            Email:&nbsp;<span itemprop="email">enquiries@myaddress.co.uk</span>
                            Web:&nbsp;<span itemprop="url">www.myaddress.co.uk</span>                 
     &#9;&#9;&#9;        </div>    &#9;&#9;    &#9;            
                   </div>

Open in new window


So I need to include description and myLogo in the itemtype="http://schema.org/LocalBusiness" though from what I understand I cannot duplicate. I have tried loads to do this over the past months. Any advise would be greatly appreciated.

Thanks
0
Comment
Question by:blackstarsystems
  • 5
  • 4
11 Comments
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
The first thing that I noticed, using the Structured Data Testing Tool, is that there is an error:

Error: Page contains property "postcode" which is not part of the schema

<span itemprop="postCode">

should be

<span itemprop="postalCode">

according to the schema PostalAddress.
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
Extracted structured data:

Extracted structured data
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
The second thing, is that I am not sure what you are asking, so I would like to make sure that I understand before commenting.

Are you trying to set "logo" and "description" for LocalBusiness schema?  

It is my understanding that you can combine formats for Structured Data, so you might be able to use RDFa attributes to achieve that you need, but I haven't figured that one out yet.
0
 

Author Comment

by:blackstarsystems
Comment Utility
Hi TheLearnedOne,

For the purposes of this lets use logo. Basically I have the contact details in the footer of my page and I have added the rich snippets to them. See below in div called footer.

<div id="header"><img id="logo" src="logo.png" /></div>
<div id="body">Some text...</div>
<div id="footer" itemscope="" itemtype="http://schema.org/LocalBusiness">     		        
                            <span itemprop="name">Black Star Systems Ltd</span>
</div>

Open in new window


Now in above code I would like to a rich snippet to my logo image tag which is in header. The problem is that the img logo is not in footer div where I declare the schema. So how do I incorporate logo into rich snippets as I cant move the logo it needs to be at the top of my page. How will Google know what schema to use if its not inside and itemType element.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 96

Accepted Solution

by:
Bob Learned earned 500 total points
Comment Utility
Hmmm...I would think that you would need to define itemscope one level higher in the HTML hierarchy.  I used the Structured Data Markup Helper, which generated this HTML, with 1 itemscope for LocalBusiness, and another for PostalAddress.  I manually edited the HTML to add the <Title> element, and the description itemprop.

<!-- Microdata markup added by Google Structured Data Markup Helper. -->
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div itemscope itemtype="http://schema.org/LocalBusiness">
            <div class="header">
                <img itemprop="image" src="myLogo.png" />
            </div>
            <div class="body">
                <div class="description" itemprop="description">Some descriptive text</div>
            </div>
            <div class="footerInfo">
                <h3>Contact Details</h3>
                <div style="font-size: 1.1em; margin-left: 20px;">
                    <span itemprop="name">My Company Ltd</span>
                    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                        <meta itemprop="addressRegion" content=", SE18">
                        <meta itemprop="postalCode" content="1HH.">
                        <span itemprop="streetAddress"><span>25 Sycamore Rd</span>, <span>Deptford</span></span><br />
                        <span itemprop="addressLocality">London</span>, <span>SE18 1HH</span>.
                    </div>
                    <br />
                    Tel: <span itemprop="telephone">+44 (0) 01250 224 663</span><br />
                    Email: <span itemprop="email">enquiries@myaddress.co.uk</span><br />
                    Web: <span>www.myaddress.co.uk</span>
                </div>
            </div>
        </div>
    </body>
</html>

Open in new window

0
 

Author Comment

by:blackstarsystems
Comment Utility
Oh I see. Thank you learned one. I know its a bit basic I just couldn't get my head round it and couldn't understand what I was doing wrong. To top it off I couldn't convey what I mean at all very well. Thank you for your time. I just embed the whole page into the schema
then and see what that does. Thanks you.
0
 

Author Comment

by:blackstarsystems
Comment Utility
Oh I see. Thank you learned one. I know its a bit basic I just couldn't get my head round it and couldn't understand what I was doing wrong. To top it off I couldn't convey what I mean at all very well. Thank you for your time. I just embed the whole page into the schema
then and see what that does. Thanks you.

Of course the problem above now is that thats basically my whole website inside that schema. Lat on I am going to want to do the Breadcrumb schema. Based on what you have provided then the breadcrumb schema will be inside Local Businesses schema. Thanks for your help.
0
 
LVL 96

Expert Comment

by:Bob Learned
Comment Utility
The problem that I see with the Structured Data (new name for Rich Snippets) Markup Helper is that it doesn't support the full schemas from schema.org, and it doesn't have all the attributes from the objects, like LocalBusiness.Description, so you have to think about how to manually edit the HTML to add those attributes.
0
 

Author Closing Comment

by:blackstarsystems
Comment Utility
Well thanks for all the help you have given me. I think I am getting a handle onit.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now