Meta and Schema

Defining the Content about your Content

WordCamp Chicago 2018

We know how our website looks on our server

Screenshot of WordCamp Chicago 2018 Home page

How does it look on others?

Screenshots of pages shared on social networks and search engine results

TLDR  /  BLUF

Meta

Meta (from the Greek preposition and prefix meta- (μετά-) meaning "after", or "beyond") is a prefix used in English to indicate a concept which is an abstraction behind another concept, used to complete or add to the latter. - Wikipedia

The subject catalogue of the University Library of Graz. The card shown refers to a text by Hans Schleimer who made up the rules for this catalogue. - Image Source
People working in Card Division in the Library of Congress, Washington, D.C., 1910s or 1920s - Image Source
Dynix, an early but popular and long-lasting online catalog - Image Source
Librarian at the card files at a senior high school in New Ulm, Minnesota (1974) - Image Source

W3C HTML 5.2 Specification

4.2. Document metadata

W3C logo

<head></head>
<title></title>
<base>
<link>
<meta>
<style></style>

<head></head>

The head element represents a collection of metadata for the Document.

  • As the first element in an html element.
  • May be omitted if empty.

<title></title>

The title element represents the document’s title or name.

  • In a head element containing no other title elements.
  • Neither tag is omissible.

<base>

The base element allows authors to specify the document base URL for the purposes of Parsing URLs, and the name of the default browsing context for the purposes of following hyperlinks.

  • A base element must have either an href attribute, a target attribute, or both.
  • In a head element containing no other base elements.
  • No end tag.

<link>

The link element allows authors to link their document to other resources.

Attributes

  • Global Attributes
  • href — Address of the hyperlink
  • crossorigin — How the element handles crossorigin requests
  • rel — Relationship of this document (or subsection/topic) to the destination resource
  • rev — Reverse link relationship of the destination resource to this document (or subsection/topic)
  • media — Applicable media
  • nonce — Cryptographic nonce used in Content Security Policy checks [CSP3]
  • hreflang — Language of the linked resource
  • type — Hint for the type of the referenced resource
  • referrerpolicy - Referrer policy for fetches initiated by the element
  • sizes — Sizes of the icons (for rel="icon")
  • title (global attribute) has special semantics on this element: Title of the link; alternative style sheet set name.

<style></style>

Allows authors to embed style information in their documents.

  • In head, body, or noscript
  • Neither tag is omissible.

<meta>

The meta element represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.

Document metadata is expressed in terms of name-value pairs, the name attribute on the meta element giving the name, and the content attribute on the same element giving the value.

  • Except for some edge cases, use only in the <head>
  • No end tag.

<meta>

Name => Value(content)

<meta name="description" content="This session reviews implementing Schema.org schemas for structured data and current best practice meta tags in WordPress.">

<meta>

Standard metadata names

  • application-name - The value must be a short free-form string giving the name of the Web application that the page represents.
  • author - The value must be a free-form string giving the name of one of the page’s authors.
  • description - The value must be a free-form string that describes the page.
  • generator - The value must be a free-form string that identifies one of the software packages used to generate the document.
  • keywords - The value must be a set of comma-separated tokens, each of which is a keyword relevant to the page.
  • referrer - The value must be a referrer policy, which defines the default referrer policy for the Document.

<meta>

Pragma directives

In computer programming, a directive or pragma (from "pragmatic") is a language construct that specifies how a compiler (or other translator) should process its input. - Wikipedia

  • content-language - This pragma sets the pragma-set default language. This feature is non-conforming. Authors are encouraged to use the lang attribute instead.
  • content-type - an alternative form of setting the charset attribute.
  • default-style - sets the name of the default alternative style sheet set.
  • refresh - acts as timed redirect.
  • set-cookie - sets an HTTP cookie. This feature is non-conforming. Real HTTP headers should be used instead.
  • x-ua-compatible - In practice, this pragma encourages Internet Explorer to more closely follow the specifications.
  • content-security-policy - enforces a Content Security Policy.

<meta>

Other metadata names

Web Hypertext Application Technology Working Group (WHATWG) Meta Extensions

<meta>

Make your own if you need to

  • <meta name="category" content="Category One">
  • <meta name="tags" content="Tag 1, Tag 2">

Test and Verify

W3C Developers

W3C Developer Tools

Google

Meta tags that Google understands

Google Search Result

Meta tags that Google understands

  • <meta name="description"
  • <title>The Title of the Page
  • <meta name="robots"
  • <meta name="googlebot"
  • <meta name="google" content="nositelinkssearchbox"
  • <meta name="google" content="notranslate"
  • <meta name="google-site-verification"
  • <meta http-equiv="Content-Type"
  • <meta charset="
  • <meta http-equiv="refresh"

Open Graph Protocol

Facebook card

The Open Graph protocol enables any web page to become a rich object in a social graph. Used by Facebook, LinkedIn, Pinterest, & Google+

Open Graph Protocol

Required fields

  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".

Open Graph Protocol

Types

  • Music
  • Video
  • Article
  • Book
  • Profile
  • Website

Test and Verify

Twitter Cards

Twitter card

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website.

Twitter Cards

  • Summary card
  • Summary with large image
  • Player card
  • App card

Test and Verify

Implementing Meta Tags in WordPress

Yoast SEO Plugin

Yoast SEO Plugin

Yoast SEO Plugin

Theme


<?php if ( has_post_thumbnail() && is_single() ) { ?>
    <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        
    <?php } elseif ( has_post_thumbnail() && is_front_page() ) { ?>
        
    <?php } else { ?>
        
<?php }?>
          
Meta Cat

Schema

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Most commonly used schemas

Inline


    
San Francisco 49ers
Joe Montana
1979 1992 Quarterback

RDFa


    
San Francisco 49ers
Joe Montana
1979 1992 Quarterback

JSON-LD


    
          
Google

What does Google care about?

Google Search Gallery

Implementing Schema.org in WordPress

Yoast SEO Plugin

Yoast SEO Plugin

Schema Plugin

Supports these schema.org types, and can be extended.

  • Article
    • General
    • BlogPosting
    • NewsArticle
    • Report
    • ScholarlyArticle
    • TechArticle
  • Blog (for Blog posts list page)
  • BreadcrumbList (for Breadcrumbs)
  • CollectionPage (for Categories)
  • AboutPage (for the about page)
  • ContactPage (for the contact page)
  • Person (author archive)

Schema Plugin

Schema Plugin

Schema Plugin

Schema Plugin

Schema Plugin

Schema Plugin

Widget

Generate your own JSON-LD and add it in a widget


    
          

Theme

Add inline markup to your custom theme


    
{% if content.field_image_product|render %} {{ content.field_image_product }} {% endif %}
{{ title_prefix }}

{{ label }}

{{ title_suffix }} {% if content.body|render %}
{{ content.body }}
{% endif %}
    {% if content.field_ref_producer|render %}
  • Producer: {{ content.field_ref_producer }}
  • {% endif %} {% if content.field_sku|render %}
  • SKU: {{ content.field_sku }}
  • {% endif %}

Test and Verify

Google Structured Data Testing Tool

via GIPHY

The End

Continuing the conversation:

WordCamp Chicago 2018