 All right, we're here today to talk about meta in schema, defining the content about your content. My slide deck is online. You can follow along at jimbir.ch slash meta dash schema dash wp. I tweeted it out a few minutes ago, too. The deck has a lot of links to specifications and testing tools. So if you want to check those out, you can follow along. There's been a lot of talk here about your content and how it can compete on the web these days. We've definitely moved from the ham radio days of the internet into more of the cable TV internet. And we spend our days working to make sure our content looks great on our website, can be found. But what happens when your content leaves your website? These days, most people are getting their content from these six big companies, Facebook, LinkedIn, Bing, Google, Pinterest, Twitter, social media, and search engines. And they all display your content a little differently. So the bottom line up front, we're going to go through the W3C HTML 5.2 specs. The working group, what META extensions. This is a working group that has META extensions beyond what the W3C specifies. The open graph protocol, Twitter cards, and schema.org. And then we'll test all this stuff as we go. So META. This is my little Lego Uncle Jim, my nine-year-old nephew who made him for me for Christmas. And now he likes to travel the world, get his picture taken, and teach people about WordPress and Drupal. So META. It's a prefix used in English to indicate a concept which is an abstraction beyond another concept to complete or add to the letter. So this is the most META image I've found on the internet. It's a picture of a card in a card catalog that describes the card catalog. People have been keeping metadata about information for years. This is a picture from the Library of Congress in the 1910s or 1920s, where the team of people kept up these card catalogs. At a certain point, this went online. Goshen was a way to get these card catalogs online and put this nice little old lady out of business. Now we are the keepers of this data. The W3C specifies only six different types of META data about documents. This is the head, title, base, link, meta tag, and style tags. So the head tag is the first thing that comes on a page. And it can be omitted if you don't have anything, but it opens and closes. And this is where we're going to put our metadata. The title tag, this is the most important thing on the page. It opens and closes. And there can only be one. The base tag is used to specify a base for the page. So if you want to have all the links on your sites, use the same base. Use this tag. The link tag, if you want to link other resources into your metadata. So this is good for style sheets, languages, media, style tag. Everybody wants to put CSS on their page. You can do it here. And then the meta tag. The meta element represents various kinds of metadata that cannot be expressed as the other things. Metadata is expressed in terms of name value pairs. Most of the time, if not all of the time, it can only be used in the head. And it's just a single tag. There's no end tag. So the most important concept here is that name value pair. So the meta tag opens. You give it a name. In this case, the description. And then the value is the content. In which case, this is my meta description on the page. There are only a few standard meta tags. And most of these are not used. Application name, author, generator, keywords, all of these are pretty much useless unless you're consuming them personally. The refer that's used in some advanced SEO campaigns in the description tag, which is consumed by everybody. This is the most important one. There are a few pragma directives. These are your app telling the browser how to render the page. So it's telling content type, certain things for Internet Explorer. If you have a content security policy, these are basically directives to the machine, not to the user. And then the fun stuff. Here we get into the other metadata names. So the web hypertext application technology working group is a group that's splintered off from the W3C because they felt the W3C was moving too slow and paying more attention to X-HDML instead of HTML. So they splintered off and they started this list of meta extensions. So anybody who wants can propose new meta tags, namespace them, and they'll get on this list. So there's a lot of government and academic things, geolocation, the list is pretty long. Like the first one on the list is the Australian government. There's a bunch of Blazer SEO, Google Scholar has their own citation tag, Dublin Core is also used by media, sorry, libraries and academic institutions. The geolocation tags are coming up. List goes on and on. So when you're doing your content modeling, when you think about what this piece of content is online, we also refer to this list to see if anything applies. So like we're talking about an event that has a location, we want to include the geolocation tags. You can make your own meta tags if you need to. Simply follow that name value pair. So a common thing to do in the WordPress is to have your categories or your tags. And you do this if you need to consume that later. For example, we'll look at a Wall Street Journal that has a bunch of custom tags that they're consuming on their own. I did a search engine for a documentation that a new version would come out every quarter. And we added the version number as a tag and then we weighted the search results using that tag. So this is completely valid to create your own. So now you've created all your meta tags. What we want to do is test and verify. So the W3C has a bunch of tests. This one is called the unicorn test. And it goes through and tests everything, your markup, your CSS and your feed. So this is what WordPress.org looks like. They have nine errors and, sorry, nine infos and 30 errors. Not too bad on their CSS seven and then their feed is perfect. And this is actually a really good result of this test. Okay, probably the most important thing to do is make sure Google likes your content, right? So meta tags that Google understands, it's not a secret, they tell us. As part of search console help, they have a list of information that they read. So there's a couple Google specific directives for Google bots. If you don't want a site search box to show up or you don't want your content to be translated, then the title, a refresh tag, a viewport tag. And then they clarify, this is not an exclusive list of available meta tags and you should feel free to use unlisted meta tags if they're important to your site. Just remember that Google will ignore meta tags. It doesn't know. And there's that list of tags. Up next is Facebook. So Facebook started the open graph protocol to enable web pages to become rich objects in a social graph. So no longer is this a web page on the internet, it is actually a book or an article or a dress or whatever else. Facebook open sourced this and since then, most of the world has adopted it. LinkedIn, Pinterest, Google Plus. A lot of people consume these tags. There are four required fields. Title, which is your title, type, which we'll get to the list in a minute. The URL, which is the canonical URL before canonical URL tags existed. And then an image. And this was kind of a sea change on the internet for content creators where basically every piece of content needs to be shared on the social graph requires an image or should have an image at least. Those content types, music, video, article, book, profile and website. So it's a few creative works, a person and then a website or an app. Once you've added these tags, you can test and verify. Facebook has a debugger. Pinterest has a validator, a debugger. In LinkedIn, you can actually just share the post. If you don't like what you see, get them to re-scrape at a string at the end, question mark gobbledygook, and you can force LinkedIn to refresh, refetch. The Facebook debugger is probably what you want to use the most. So this is itfetchingwordpress.org. I did it 53 minutes ago while I was getting ready so we can go and scrape again. It's gonna go, pull the page. So if your content creators publish an article, have a missing image or wrong image or spelt Tom Cruise's name wrong in the title, you can get Facebook to go and re-scrape. And they're gonna give you all the data that they see and then you can do some really nerdy stuff down here with the APIs too. Twitter cards, basically the same thing as Open Graph but Twitter specific. Rich photos, videos, media experiences basically. There are four types of Twitter cards. Summary card and summary with large image. This is what articles use the most. You want that big image at the top, use the summary with large image. If you want this regular summary card, it's just kind of like a little teaser. Then if you're creating audio or video that can be consumed on your site and you want it to be consumed inside of Twitter, you have the player and the app card. So those are basically a little bit more content specific. And they have a validator. So once you add your tags, you can go over here and there's the specifications. Go over here, get them to re-scrape. And again, this does update their cache. So you can come in here if you do something wrong, want them to re-scrape. They give you the info of what they have down here. All right, so implementing meta tags in WordPress. I don't know if you guys knew this, but WordPress has a lot of plugins. We'll go through the most common, the Yoast SEO plugin. Seems to be the most popular plugin for SEO. On each of your posts or custom post types, you can set defaults using tokens or slugs. Here you can see in the SEO title and the meta description. And this is a per content piece instance. They also have defaults. So you can add your Facebook account. You can set a default image. Same thing for the Twitter. Do we want to use that summary with large image card or do we want to use another card and then do some more settings for Pinterest and Google? For the developers or the plugin lists, you can also put this markup in your theme. So I actually pulled some snippet of code from a site I did in 2012, which basically said if this post doesn't have a thumbnail, use these default images with a conditional if it's the front page, use this different image. Really easy to do. I'm sure you can do this in a plugin also. So for doing research for this presentation, I wanted to see what publishers were doing that was specific to their needs. So found a lot of good examples at the Wall Street Journal. So right off the bat, they have a lot of meta tags. They have a lot of metadata about their articles. Those standard tags we see, they use them all. Robots, they don't want to archive or use the open directory project. That's kind of an ancient technique. Those things don't exist anymore, but they're setting the language. They are accepting links from referrers. They're defining the author description and they are even using keywords. The first group here is Facebook specific. This is not an open graph, but they say which of their apps and pages on Facebook they own. And then they add the open graph and they're doing a really good job here. Setting the link, setting the image, the image dimensions, which locale they want on Facebook. Their site name. The only thing they're not doing, which is a brand new tag, is the alt text to the open graph image. Twitter cards, same thing. They are setting the title, the image. Here they are doing the alt text for the image. They are tagging their creator on Twitter and their site and their domain. They're getting into some RDFA, which I'll get to in a minute, but they're doing some basically time and description image and language. This was consumed by Google Plus for a while. They are setting some Apple and Android specific tags. So Google News used to have a tag up until recently. They discontinued it, but they still have that in here, that news keywords. This Apple iTunes app in iOS URL. So if you look at this page on the internet, you will probably see a banner that those operating systems put in, that say you wanna look at this in their app, not in the browser. So that's all defined by meta tag, which is pretty cool because it's not an extra JavaScript that you have to load on the page and slow it down on your page load. Advertising and personalization tags. I saw these and sent my investigative journalist mind down a rabbit hole of what the heck these things are. But that CX sense, it seems to be a proprietary content personalization and advertising service that the Wall Street Journal also runs. So this is part of those custom tags. And then even more custom tags. They're defining users. I'm a non-subscriber looking at this. It's my expiration maybe is default. They have page sections. So they might be syndicating this content out elsewhere. And then they have even more metadata about the article. So what template it's using, the ID, look at that really long ID there, which type the headline, the original headline or the updated headline, I guess, summary page section, publish time, word count, basically everything that they need to know about this article may be consumed by their search engine or consumed by their subscription service or their advertisers or their analytics program. Really cool stuff in here. So that's it, metadata section is over. Okay, there's a little Bob too. He's great. Okay, let's talk about schema. Schema.org is the evolution of this metadata. It's a collaborative community. Its goal is to create, maintain, and promote schemas for structured data on the internet, web pages, email messages, and beyond. So I'm gonna touch on the internet side of things and maybe the beyond side of things. If you're sending emails, the email schemas are really cool too. So you can do things like have your app say that this is an event, add it to your calendar. Lots of really cool structured data things in there. Okay, so let's look at the big list of schemas. This is everything. And it goes on and on for days. So when we talked about content modeling earlier, this is a really fun place to play that old person places or thing game and then narrow down from there. More schemas are being introduced all the time and the list gets updated often. The most popular ones. Creative works, events, a lot in the healthcare section. Organization, people, places, local businesses, restaurants, et cetera. Products which have offer and aggregate offer. Reviews and actions. We started implementing schema.org's using micro data. So basically this was just inline markup that you'd specify the type and then have the elements inside of it. So this is a sports team. It has a name. The wonderful thing about schemas is that they can be nested together. So we have a sports team. It has a name, but it also has members. So Joe Naimeth played for the 49ers. So he is a member inside of this sports team and you can get really fine. What's that? Oh, sorry. I'm at Joe Montana. And then everybody can have the information nested all the way down. The RDFA, the resource description framework in attributes was another way to do it. It kind of an evolution. So this is specifying that we are using schema.org and it's a type of sports team. The RDFA could be used in other schemas, other kind of vocabularies. But really this has evolved into JSON-LD. JavaScript object notation for linked data. JavaScript can be loaded in the head or the body. It can be loaded on you go. So if you're building pages in a headless kind of way, you can send little snippets of data that can be consumed by the browser. And then the same thing, we're defining the schema. We have a type, a name. The member can then be listed. It has a type and a name and a start date and a end date. So we are gonna see what Google cares about. And again, it's not a surprise, but Google tells us what they consume for schema. Developers.google.com is a great place. They have a section for Google search. And basically it's kind of like the handbook of getting your content recognized on Google search. So this search gallery section shows how structured data can produce rich results in Google search. So if you want your content to appear in Google search, not just a link to your content on its site, follow these guidelines. So there are things that every website can use, every company can use. These would be enhancements over here. And then down at the bottom, there are content types. So basically articles, books, courses, data sets, events. There's a fact check schema for all you fake newsers out there. Job postings, local business, occupations, recipes, reviews, speakable, we'll get to that in a minute, and videos. And then everything has a guide and which tags are required, which tags are optional, really great detailed information. So schemas that every website needs, breadcrumbs. If you have breadcrumbs on your site, you can basically gain real estate in Google search because they will put your breadcrumbs right below your title in little green links. And as we all know, the more real estate we have in Google, the more chances we have of getting a click. Organization, so if your website is a company website, represents a company, you can have your corporate contact, your logo and your same as, which is your social profiles. So basically you're telling Google that you're the Wall Street Journal here, but you're the Wall Street Journal on Facebook, you're the Wall Street Journal on Twitter, and all the other sites. And then there's a website schema and in that website schema it has a search action. So if your site has a search functionality, you can actually get that search box into Google. It's not a sure shot, but most of the time they do if you specify how to search on your site. The content specific schemas, we just went through those. A lot of interesting ones, recipes and reviews have been on there for years, how to get your rich cards in the top of Facebook. Podcasts we didn't talk about, data sets and courses. New and beta features are being added all the time. Just last week, schema.org announced Speakable. Basically you can now specify what part of your content that you want Google Home or any one of their talkie devices to read aloud if you are chosen as the search result. They announced that on the Google Webmaster Central blog. So in the same day schema.org got updated because there are contributors that work at Google who work at schema.org or volunteer there. And they announced it in their search gallery and on their blog. Data set, this has been a feature in the search gallery for a long time, but they made an announcement this week on the keyword blog which is their big Google everything blog, that if you have a large set of data you can mark it up in a certain way where you can use the Google search engine to search inside of that data. In a conference and a confirmation on a search engine land blog, they specified that they are using facts, question and answer and how to schema markup in their search results for rich answers. This was pretty cool because like I looked at fact page which is the schema name for the facts and only between 500 and 5000 sites use this tag. So if you're first online to mark this up you have a better chance of getting your frequently asked questions in Google search. They have a beta feature for top places list. So this is a nice big rich card that shows up on the side of Google when you are searching for things to do in Chicago. You have to apply for this. So if you have a publisher's account with Google you can say hey we're interested in creating content for this schema. And then in the spring they announced advanced results for job posting. So if you use the job posting schema to mark up your jobs on your site you can get those listed in the right hand side alongside search results. This is a lot to take in Ryan and oh my God it's changing. There's a few things where I kind of monitor, keep up, get feeds from. The Google Webmaster Central blog is a really infrequent blog but when they write about something the internet changes. So this is where they announced that every site should be HTTPS. Every site should have schema.org or be fast web performance. The keyword, this is a little bit harder to understand because Google's a big company but they do post search specific things in there. Pending.schema.org in the schema.org issue queue on GitHub. This is where new ideas for schemas are presented. So the issue queue they actually do the work of getting the schema in here and then once it's published there it appears on pending.schema.org for community feedback and review. So if you wanna keep on track of what's coming next those are the places. Okay implementing schema.org in WordPress. The Yoast SEO plugin returns. You can set a lot of defaults here and there really those, Marka the things every website should need they're all over that. So you can set your company or a person, your company name, your company logo. You can set your same as, put in all your social profiles, your Facebook, Twitter information. There are a lot of premium plugins that are specific that I found like dozens of pages of schema plugins. A lot of focus on WooCommerce or reviews or recipes that kind of thing. I found one called the schema plugin. It's very nice out of the box. It's not an end-all solution but it comes with article blog, breadcrumb list, collection page, about page, contact page, person. So really like your default WordPress installation it covers a lot of the bases. The schema plugin also has these default settings about page, contact page, featured image and if it doesn't have a featured image you can create one, publisher logo, breadcrumbs, comments, audio and video. More defaults, here's the organization settings, show the site link search box and what I really liked about this was that if you're using custom post types you can go in and add additional schemas for each of those. So in this case we have post in a page right out of the box we also have a resources post type. And then inside of there you can go in and define which of your post meta fields you want to go into which thing. So in this case for the resources I did the exact same thing as the article but I changed the article type and then I used the Yoast WP SEO title and the Yoast WP SEO meta description fields to set those attributes. So this is where you would preface article with the type of news article versus article of a general type or a blog type. You can get really fine tuned. It doesn't have a lot of those deep dive schemas but the plugin author has made it so you can extend this in code to add your own schemas as you need. Okay another way if you're just doing one off pieces of content you can generate your own JSON LD and just stick it in in a widget. Google has a structured data markup helper which is just a kind of form that you fill out and at the end of it once you've clicked everything together you can get a large chunk of JSON LD to stick in a widget or stick in your theme. You can also do inline markup in your theme. So forget about JSON LD. We wanna go back into that markup world. We can just do inline RDFA or was the other one item scope. And then once it's all done Google has a structured data testing tool. So there's no guessing if you did it right you can go back over here and test. So this is the Wall Street Journal. The homepage has an image object or 62 image objects and they give you the output of those and then the web page markup. And they're defining basically like all those things we saw in the meta world they're defining in the schema world also. And then here they have one warning. They have article section. So Google tells us the property article section is not recognized by Google for an object type web page. So they can either fix that or forget it. And let's go through their schemas. Here's their homepage. Pretty simple. Looks like those base meta tags that they had. So they're saying it's a web page. There's that article section that Google doesn't know about. The author is the Wall Street Journal. They have a thumbnail URL, headline URL description and then keywords. When we get to an article and sorry for the small font more detailed and more nesting. So here it's a news article. The main entity of the page this is the canonical URL is a web page with the ID. The headline's the title. Here's a nested image object a nested author, nested publisher. Is it accessible for free? So in the news article schema you can specify your paywalls and then which elements on the page guard that protected content. So the content's still scrapable but won't get served up by the search engines. So it has a part, a web page element is successful for free, false, CSS selector paywall. So if anything in that CSS selector is behind a paywall. And then a bunch of date, time information, the URL, thumbnail and then the creator and keywords. The author page, so Wall Street Journal's authors all have a page on their website. They actually mark it up as a web page about the author not as a person tag. So they don't wanna claim that the Wall Street Journal is Nick. They want to say that this page is about Nick. So there's all his information. And that is it for schema. I'd love to talk more today with anybody or if you have any questions now I'd be more than happy to answer them. What sort of effect does it have? If you have a lot of tags does that have an adverse effect on page speed? Yeah, it's just more characters in your source code. And does the structure of your code matter or can't be minified? Yes, it can be minified, yeah. It does need to be proper JSON, LD to have it. But yeah, it can be minified for sure. And the Wall Street Journal's was I had a fun time reformatting it for this presentation. Great, oh. Do you know if those schema plugins will expose that data in the WordPress REST API? I do not know that, no, sorry. No. One of the cycles I think we get into sometimes is paying attention intermittently to these kind of things. And when we launch a project or on an update and then ignoring them for long periods. I was wondering if there are tools out there like there's tools to look at individual pages. Is there tools to scan your site on an ongoing basis and keep you honest on these things? Not that I know of. I mean, I monitor kind of like the SEO world and see what people are coming up with. It's kind of equal parts, tech, content, and marketing. So all of these parties need to work together to basically market, present, and deliver this content to these services. So yeah, I don't know of an automated service that does that. I'm sure, like a lot of SEO companies have the tools to, you know, their own proprietary tools to follow the stuff around. But yeah, I don't know of an automated thing. Sure, but yeah. Yeah, so you can monitor for errors of what you already have, but it's not gonna get you any new features, you know. Saying like, oh, you know, you are a news publisher. You want, you know, Google Home to speak your article or which specific teaser of your article, you know, that you just gotta monitor. One of the things I know that Google Search Console also does is with the schema, if you have them put in place, for instance with recipes, recently it became, I guess, videos they wanted to have set as a recommended field. And we've got publishers where all of their Search Console blew up saying you don't have videos attached to your recipe card data. So it will tell you which one's Google is now recommending at least. So as new ones come out, you at least can get that data from them. Awesome, cool. As you guys are all really smart, did I miss anything? I know I have a tendency to go really deep into learning these things, so. Awesome, great. Well, thanks for coming, everybody. Hope you enjoy the rest of the camp and thank you guys for putting on a great event.