Microsocial: How tiny bits of data can make or break your website

by Shannon Smith

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com @cafenoirdesign

Slide 3

Slide 3 text

O father, what a hell of witchcraft lies In the small orb of one particular tear. -William Shakespeare

Slide 4

Slide 4 text

What We’ll Cover 1. Microcontent 2. Metadata 3. Structured Data

Slide 5

Slide 5 text

Does It Really Matter?

Slide 6

Slide 6 text

“Yes.” -Google, Yahoo, Facebook, Twitter

Slide 7

Slide 7 text

Microcontent

Slide 8

Slide 8 text

What Is Microcontent?

Slide 9

Slide 9 text

What Is Microcontent? Small Bits of Content

Slide 10

Slide 10 text

What Is Microcontent? “Microcontent should be an ultra-short abstract of its associated macrocontent.” - Jakob Nielsen

Slide 11

Slide 11 text

What Is Microcontent? “Today, microcontent is being used as a more general term indicating content that conveys one primary idea or concept, is accessible through a single deﬁnitive URL or permalink, and is appropriately written and formatted for presentation in email clients, web browsers, or on handheld devices as needed.” - Anil Dash

Slide 12

Slide 12 text

What Is Microcontent? Very small, basic units of digital content or media “that can be consumed in unbundled microchunks . . . and aggregated and reconstructed in hyperefﬁcient ways”. - Umair Haque

Slide 13

Slide 13 text

What Does Microcontent Look Like?

Slide 14

Slide 14 text

Incoming vs Outgoing Microcontent

Slide 15

Slide 15 text

Who Is Using Microcontent? 1. Search Engines 2. Humans 3. Social Networks

Slide 16

Slide 16 text

Who Is Using Microcontent? Search Engines Microcontent Defines the Content

Slide 17

Slide 17 text

Who Is Using Microcontent? Humans Microcontent Is Part of the Content

Slide 18

Slide 18 text

Who Is Using Microcontent? Social Networks Microcontent Is the Content

Slide 19

Slide 19 text

How Can You Leverage Up? Create microcontent that is... • bite-size • shareable • context-independent • audience-speciﬁc

Slide 20

Slide 20 text

Metadata

Slide 21

Slide 21 text

What Is Metadata?

Slide 22

Slide 22 text

What Is Metadata? Data About Data

Slide 23

Slide 23 text

What Is Metadata? Meta Elements Meta Tags

Slide 24

Slide 24 text

What Is Metadata? Tags which contain content that search engines show to humans.

Slide 25

Slide 25 text

What Does Metadata Look Like?

Slide 26

Slide 26 text

What Does Metadata Look Like?

Slide 27

Slide 27 text

Who Is Using Metadata? Humans

Slide 28

Slide 28 text

An SEO copywriter walks into a bar, grill, pub, public house, Irish, bartender, drinks, beer, wine, liquor...

Slide 29

Slide 29 text

How Can You Leverage Up? Add metadata that is... 1. natural 2. human-centric 3. unique

Slide 30

Slide 30 text

Structured Data

Slide 31

Slide 31 text

What Is Structured Data?

Slide 32

Slide 32 text

What Is Structured Data? Data with Meaning

Slide 33

Slide 33 text

What Is Structured Data? “I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A "Semantic Web", which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The "intelligent agents" people have touted for ages will ﬁnally materialize.” Tim Berners-Lee

Slide 34

Slide 34 text

What Is Structured Data? Context for Machines

Slide 35

Slide 35 text

A Brief History of Structured Data 1995 Dublin Core 2004 RDFa 2006 Microformats (μF) 2009 Microdata (part of HTML5) 2011 Schema.org (Bing, Google and Yahoo!) 2012 Open Graph protocol (Facebook) 2012 Twitter Cards

Slide 36

Slide 36 text

What Is Microdata? By adding additional tags to the HTML of your web pages— tags that say, "Hey search engine, this information describes this speciﬁc movie, or place, or person, or video"—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.. -Schema.org

Slide 37

Slide 37 text

What Is Microdata? If Google understands the content on your pages, we can create rich snippets—detailed information intended to help users with speciﬁc queries. -Google

Slide 38

Slide 38 text

What Does Structured Data Look Like?

Slide 39

Slide 39 text

What Does Structured Data Look Like?

Slide 40

Slide 40 text

What Does Structured Data Look Like?

Slide 41

Slide 41 text

Who Is Using Structured Data? 1.Search Engines 2.Social Networks

Slide 42

Slide 42 text

Who Is Using Structured Data? Facebook vs.

Slide 43

Slide 43 text

Who Is Using Structured Data? Twitter

Slide 44

Slide 44 text

Who Is Using Structured Data? Google Authorship

Slide 45

Slide 45 text

Who Is Using Structured Data? Google Search

Slide 46

Slide 46 text

Who Is Using Structured Data? Specialized Search

Slide 47

Slide 47 text

Who Is Using Structured Data? Everyone. LinkedIn flickr Google+ Lego Last.fm Google Maps Target BestBuy TripAdvisor Twitter Zappos Wikipedia Amazon Apple store Anthropologie Office Depot Costco Netflix Google Search Toys ‘R Us NYT

Slide 48

Slide 48 text

How Can You Leverage Up? Add structured data that is... • standards-compliant • semantic • tested •useful

Slide 49

Slide 49 text

Shannon Smith Web Developer Café Noir Design Get the slides & worksheet: http://chroni.ca www.cafenoirdesign.com @cafenoirdesign