Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Google Rich Snippets

Posted on 2013-10-22
11
Medium Priority
?
408 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
11 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39596136
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
ID: 39596141
Extracted structured data:

Extracted structured data
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39596142
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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 

Author Comment

by:blackstarsystems
ID: 39597130
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
 
LVL 96

Accepted Solution

by:
Bob Learned earned 2000 total points
ID: 39597449
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
ID: 39597517
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
ID: 39597527
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
ID: 39597537
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
ID: 39597579
Well thanks for all the help you have given me. I think I am getting a handle onit.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

722 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