· 9 years ago · Jan 02, 2017, 02:58 PM
1Step 4: Add Schema.org Microdata - Item List
2
3
4The next schema we are going to add to the markup is ItemList.
5
6Itemscope Element and Itemtype Attribute
7The itemscope element and itemtype attribute for the ItemList Schema will be placed in the Skills Section like this:
8
91
102
113
124
135
146
157
16<!-- Begin Skills Section -->
17<div itemscope itemtype="http://schema.org/ItemList">
18
19Rest of Code Block Here
20
21</div>
22<!-- End Skills Section -->
23Itemprop Attributes
24Add the "itemprop" attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:
25
26ItemList Schema
27
28itemprop="itemListElement"
29Final Markup for the Skills Section
3001
3102
3203
3304
3405
3506
3607
3708
3809
3910
4011
4112
4213
4314
4415
4516
4617
4718
4819
4920
5021
5122
5223
5324
5425
5526
5627
5728
5829
5930
6031
61<!-- Begin Skills Section -->
62<div itemscope itemtype="http://schema.org/ItemList">
63
64<dl>
65<dt itemprop="name">Skills:</dt>
66<dd>
67
68<section id="skills">
69<ul class="list1">
70<li itemprop="itemListElement">XHTML</li>
71<li itemprop="itemListElement">HTML5</li>
72<li itemprop="itemListElement">PHP</li>
73<li itemprop="itemListElement">JavaScript</li>
74<li itemprop="itemListElement">Magento</li>
75<li itemprop="itemListElement">WordPress</li>
76</ul>
77<ul class="list2">
78<li itemprop="itemListElement">HTML</li>
79<li itemprop="itemListElement">CSS</li>
80<li itemprop="itemListElement">MySQL</li>
81<li itemprop="itemListElement">jQuery</li>
82<li itemprop="itemListElement">CMS Made Simple</li>
83<li itemprop="itemListElement">Photoshop</li>
84</ul>
85</section>
86
87</dd>
88</dl>
89
90</div>
91<!-- End Skills Section -->
92Step 5: Add Schema.org Microdata - Organization
93
94
95Next, the Organization schema is going to be added to the markup.
96
97Itemscope Element and Itemtype Attribute
98The itemscope element and itemtype attribute for the Organization Schema will be placed around each "Position" listed in the "Experience" section, like so:
99
10001
10102
10203
10304
10405
10506
10607
10708
10809
10910
11011
11112
11213
11314
11415
11516
11617
11718
11819
11920
120<!-- Position #1 -->
121<div itemscope itemtype="http://schema.org/Organization">
122
123Rest of Code Block Here
124
125</div>
126
127<!-- Position #2 -->
128<div itemscope itemtype="http://schema.org/Organization">
129
130Rest of Code Block Here
131
132</div>
133
134<!-- Position #3 -->
135<div itemscope itemtype="http://schema.org/Organization">
136
137Rest of Code Block Here
138
139</div>
140Itemprop Attributes
141Add the "itemprop" attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:
142
143Organization Schema
144
145itemprop="jobTitle"
146itemprop="name"
147itemprop="description"
148Final Markup for the Experience Section
14901
15002
15103
15204
15305
15406
15507
15608
15709
15810
15911
16012
16113
16214
16315
16416
16517
16618
16719
16820
16921
17022
17123
17224
17325
17426
17527
17628
17729
17830
17931
18032
18133
18234
18335
18436
18537
18638
18739
18840
18941
19042
191<section id="experience">
192
193<!-- Position #1 -->
194<div itemscope itemtype="http://schema.org/Organization">
195
196<h2 class="top"><span itemprop="jobTitle">Web Developer / Designer</span></h2>
197<p class="bus1"><span itemprop="name">Company Name 1</span></p>
198<p class="time">February 2009 - Present</p>
199
200<p itemprop="description">
201Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
202</p>
203
204</div>
205
206<!-- Position #2 -->
207<div itemscope itemtype="http://schema.org/Organization">
208
209<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
210<p class="bus1"><span itemprop="name">Company Name 2</span></p>
211<p class="time">November 2007 - February 2009</p>
212
213<p itemprop="description">
214Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
215</p>
216
217</div>
218
219<!-- Position #3 -->
220<div itemscope itemtype="http://schema.org/Organization">
221
222<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
223<p class="bus1"><span itemprop="name">Company Name 3</span></p>
224<p class="time">March 2006 - November 2007</p>
225
226<p itemprop="description">
227Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
228</p>
229
230</div>
231
232</section>
233Step 6: Add Schema.org Microdata - Article
234
235
236Next the Article schema is going to be added to the markup.
237
238Itemscope Element and Itemtype Attribute for Article
239The itemscope element and itemtype attribute for the Article Schema will be placed in the "Article" listed in the Publications Section like this:
240
2411
2422
2433
2444
2455
2466
2477
248<section id="publications">
249<div itemscope itemtype="http://schema.org/Article">
250
251Rest of Code Block Here
252
253</div>
254</section>
255Itemprop Attributes
256Add the "itemprop" attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:
257
258Article Schema
259
260itemprop="name"
261itemprop="url"
262Final Markup for the Publications Section
2631
2642
2653
2664
2675
268<section id="publications">
269<div itemscope itemtype="http://schema.org/Article"><span itemprop="name">
270<a itemprop="url" href="http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a></span>, <a href="http://net.tutsplus.com/" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11
271</div>
272</section>
273Step 7: Add Schema.org Microdata - EducationalOrganization and PostalAddress
274
275
276Next the EducationalOrganization and PostalAddress schemas are going to be added to the markup.
277
278Itemscope Element and Itemtype Attribute for EducationalOrganization
279The itemscope element and itemtype attribute for the EducationalOrganization Schema will be placed in the Education Section like this:
280
2811
2822
2833
2844
2855
2866
2877
288<section id="education">
289<div itemscope itemtype="http://schema.org/EducationalOrganization">
290
291Rest of Code Block Here
292
293</div>
294</section>
295Itemscope Element and Itemtype Attribute for PostalAddress
296The itemscope element and itemtype attribute for the PostalAddress Schema is nested within the EducationalOrganization Schema and is placed around the code containing the address information in the Education section like this:
297
2981
2992
3003
3014
3025
303<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
304<span itemprop="streetAddress">2801 Bancroft Street</span>
305<br />
306<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
307</div>
308Itemprop Attributes
309Add the "itemprop" attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from these schemas:
310
311EducationalOrganization Schema
312
313itemprop="name"
314itemprop="url"
315PostalAddress Schema
316
317itemprop="streetAddress"
318itemprop="addressLocality"
319itemprop="addressRegion"
320itemprop="postalCode"
321itemprop="addressCountry"
322Final Markup for the Education Section
323
324<section id="education">
325<div itemscope itemtype="http://schema.org/EducationalOrganization">
326
327<p class="bus1"><span itemprop="name">University of Toledo</span></p>
328
329<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
330<span itemprop="streetAddress">2801 Bancroft Street</span>
331<br />
332<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
333</div>
334
335<p class="summary"><span itemprop="name">Web Design</span></p>
336<p class="time">2003 - 2005</p>
337
338<p class="edu-info">
339<a itemprop="url" href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a>
340</p>
341
342</div>
343</section>
344About Authorship Markup
345
346
347Image shows Authorship Markup (John Resig) displayed in Google search results.
348
349In June 2011, Google began to support "Authorship Markup". Through the use of markup, such as rel="author" and rel="me", search engines can identify content created by the same author across the web. Using Authorship Markup, a multi-authored website can link all articles and posts written by each author to their own specific "author page".
350
351Individual articles and posts of a multi-authored website need to link to the appropriate author page using rel="author" tag. If the author page also includes a link to the author's Google Profile using the rel="me" tag, then the author information may appear in search results.
352
353To help users discover quality content, Google is piloting the display of author information in search engine results. This feature is being rolled out gradually and may become a very important part of search engine results and rankings.
354
355Rel Tags
356Both the Contact and Social Media Links sections of the one page resume site template contain URLs linking to a primary website and social media pages. The "rel" attribute needs to be added to the links of these sections so that Authorship Markup can be implemented. Authorship Markup allows search engines to identify content created by the same author across the web.
357
358There are two specific rel tags used for Authorship markup:
359
360rel="me"
361rel="author"
362Most of the links included in the resume web page point to sites that are about the same person. So the rel="me" tag has been added. For the Google Profile link, the rel="author" tag has been added. Depending on where you post your online resume, you may need to use the rel="me" tag for the Google Profile link instead.