 Thank you. You can also follow along with the slides. I uploaded them to the internet. You can click on or go to Jim Birch, jimbr.ch slash Drupal dash meta dash tags. Okay, and today this is me. I'm an engineering manager at canopy studio. A couple modules, bootstrap paragraphs being the most popular today and talk about SEO starter. And I'm always hanging out in the Drupal SEO channel on the Drupal stack. Like I said, I work at canopy studios, we're a distributed digital agency that does Drupal and WordPress, and we're hiring if you are looking for a job. I'm speaking to you today from Cape Cod, Massachusetts, original home to the Nasset and Wampanoag people. And today we're going to talk about meta tags and social media and search engine strategy implementing in the Drupal. We're going to go over the tools. We're going to talk about content modeling, implementing some advanced scenarios, and then how to test. And if we have time, we can do some QA. So first up the tools. As I mentioned, the SEO starter. This is a configuration only module that I created after going through Ben Finkley as Drupal eight SEO book. It installs a suite of modules and gives you some default configuration to start your, your meta tag and your schema journey. And it installs meta tag token, then some sub modules of meta tag open graph and meta tag Twitter cards. It also installs the schema meta tag module and the schema website sub module. So what are these modules meta tag module provides a base for all meta tags. It provides sub modules that provide additional meta tagged types. And there the schema dot org meta tag module extends the meta tag module to implement schema dot org vocabularies as JSON LD instead of meta tags. And then it also has some modules to provide additional schemas. Here's what the meta tag module looks like at the top you have the base module, and then you have the sub modules that in the installed additional. Sub modules are very sweet, basically so if you want to install Pinterest or Twitter cards, you can do that if you have to verify a lot of sites like Yahoo, or Google Webmaster tools, you can install verification sub module. The schema dot org is even more advanced it has the base module and then it has additional sub modules for each schema that you need and this is going to come in handy when we talk about content modeling. The configuration that gets set is from Ben's wonderful book and you have these settings that you pull in in the meta tag has global settings. The global settings cascade down like cascading style streets CSS, the children of the parent meta tag setting inherits the settings unless it's overwritten. You fill in these meta tags using tokens and text. So you can specify just text like unsafe URL in the refer or English you from the US in the locale, or you can use tokens, which convert settings and field data into content from a Drupal site. The front page settings get inherited one under global. And we do a little bit more we add the same name here. We add what type of website it is for the open graph here on the left the og we can set some Twitter cards. Oops. And so on. The SEO starter module does not set the site logo, which is needed for the schema website at the bottom here. So you need to just hard code your site logos into this front page meta tag. The content settings. This is the default settings for every node every content on your site. So the SEO starter module assumes we have a body field on our node uses the node summary, and it also assumes we have a field called field image, like the default profile install profile that you will installs on article. So as you can see here it gets even more involved we're setting the title of the page, the image, the open graph image which Facebook uses in the open Twitter card image. There's some updated times and what Twitter card type we want. So this is where it gets even more detailed. So from there, let's go into the content modeling. We're going to do two things we're going to talk about social media first, and then we're going to talk about search engines and what they're looking for in our content model. So for our social media model. We want to find out if our clients or the website has a Facebook page or a Pinterest page or accounts, we can enable those sub modules and add their credentials in for those two platforms. If the organization has a Twitter account, you can also set that as their at Twitter name, and also their Twitter ID. And then if the authors of the site, if you have a blog or news authors, you can also set the author, Twitter and ID. And usually we do that by having a field on either the user node, or the author content type that has this data on it. So if you share the site, you can share the page on Twitter that had the organization's Twitter and the author's Twitter, they could both appear in the Twitter card. From the baseline, we set one meta description. And it's also used for the open graph for Facebook and the description for a Twitter card. But you could have two or three different ones you could set one for social media, the meta description for Google. You could set three different ones I could have a description for Twitter, I could have a description for Facebook LinkedIn Pinterest, and then I could have a description for search engines for Google. And you could do that for the title. Also, in the social media image. And this is what that look like so you could have, you know, on Google this is the incredible website of Jim Birch, but on Twitter I could throw in you should really follow at the Jim Birch on Twitter because he posts interesting things. You know, in Facebook you could have the open graph description say like, you have to click on this link or will I go gets it. So it's basically Twitter. Everybody else and then for the social media platforms. The open graph takes it. Slack actually pulls in whichever Twitter or open graph gets pulled first in the content, which I thought was pretty interesting. So for search engines. When we do our content modeling for our content types we also want to figure out how these content types figure into Google's search gallery. So this is a listing of all the rich features that they have in Google search results, which are, you know, events, articles, carousels fact check map listings. In the search gallery they actually present a detailed list of what schema dot org vocabularies they're looking for, and which fields or components in those vocabularies are required in which are recommended. So here I linked out to the article. The article basically has one requirement in that it's which type, you can have article news article or blog posting. And then there are recommended properties so you will, they recommend you have a title headline, they recommend you have an image, the date modified and date published. So we can easily take those fields from our content type and put it into the meta schema meta article type for events. It gets a lot more complicated. So this is a really long page I took three screenshots of it. They are required fields, the name, the start date and the location, and virtual is one of the locations now. And then there's dozens and dozens of types of recommended. So if you have events on your site, then you wanted to get your event listed on the search sidebar. This is how to do it. So which schemas are we talking about besides article and events. There are certain schemas that you can pretty much put on every website. So there's schemas for breadcrumbs to help Google navigate through your website. There's organization schemas. You can have the corporate contact, what the logo of the site is, what the social profiles are. So this is the, this page on the internet is the same as my organization. And then under the one that we installed by default with SEO starter, you can also specify the search action. So if your site has search, you can specify that. And then you get into content types. So there's about two dozen and every time I do a presentation like this, there seems to be another one. This year we've added home activities and COVID-19 announcements. We've added standard things like facts, QAs, recipe products, local businesses and job postings. These are all things that we make content type specific for on our site, and we can make schema.org vocabularies to go with it. So how do we implement. We're going to walk through just a simple one article. The schema.org article module. Yeah, looks like my slide didn't make it. Then you create a default. Sorry about this. There we go. And then, yeah, repeats. If I can get it to load one more time. So we're basically setting a default under content for the article, and then we're adding our schema.org article type in there. And sorry, that was a pretty impressive slide that is missing. So there's also a meta tag field. In addition to the defaults that we're setting, you can have a field on each content type where the content editors can override it. You can choose which forms appear. In on the right, you can see you're expanding basic tags advanced open graph. But it can be super overwhelming for administrators. So these forms get really, really long and have a ton of options and especially when you get into the schemas. You know, there could be hundreds of new fields on this form. The content administrators are likely to get overwhelmed. Additional forms on the node edit can be a performance issue. schema.org data should be the same as it is on the page. So these are all reasons why we recommend using field data instead of that actual form. What we do is we create fields in a field group on our node. So we have a teaser field, we have an image field, you know, we have any of those event data or open graph image if we wanted to separate ones. We create those fields like we did with any fields, and then we use the tokens to set the forms. This gives the administrators a really clean way to add the content, maintain it, only touch what they need to, without seeing those huge ugly forms. And then you don't need to use these fields in the node display. You can also just display it, disable them. So you can have that image that appears, you know, just for Facebook. And then, you know, not display it when you have it on the node. The teaser description is actually really good, you know, to set it for the meta description and then maybe use it for teaser views of the node all over the site. Some advanced scenarios that image that I just showed you, we create a preset an image just for social media. I've had some situations where the confident admins would upload these big, beautiful pictures and they're like 10 megs or 20 megs and they're just too big for Facebook or Twitter to render. So, you know, they're doing everything right, but these massive images don't get rendered when they shared on Facebook. So we go in and we set, you know, the exact size that Facebook needs right now. Facebook is 12 is 1200 by 628 and Twitter is 1200 by 630. So we do a scale and reprop the image for that specific size. And then when you do this, you can also do super fun things like I'm using the image effects module and I can put a watermark on there, or you could do some other pre processing on this Facebook image that only the social media site scene, not your site. When you do this in the field tokens, you get this extra colon. You can also find the image style name. So in this case social image, and then you can also find the with the height, the mime type. And then you can also find the alt text of the image, which the social media sites have meta text for those two. Here's what that looks like. We have the meta info at the top the image the type the with the height and the alt, and then the processed image which gets cropped to fit and then my nice canopy watermark and the bottom left. A note about tokens on each of the image, the meta tag presets. You have this browse available token link which opens up the token browser. Anything with an arrow to the right can be unfurled and you can really drill down into the tokens to get deeper into the data that you need so you know from the node you go to the image fields, and then you can go to the, you know, image preset name and then you can create. Drupal comes with core meta tags that are not easily removed. There's no way to configure it. If you look at every Drupal site it says generator Drupal eight. I developed a really simple module called meta tag remove. I just keep it on GitHub until there's this one issue in the meta tag issue queue. It was working to remove this in the module. So this is just a install it has one hook or you can copy the hook and put it into your own custom module or theme and high identify CMS identify meta tags. What about token fallback. There are times when you want to be able to provide a fallback for certain tokens. So if they have an image field and nobody loads uploads anything for the image field. Nothing gets rendered there. But I found this wonderful guest just by Samuel Martinson, who is a super smart Drupal developer web developer that gives you the ability to put an or statement in there with two pipes. One is a fallback for these fields. So some scenarios are if you have a social media image and a hero image on the page. You know, it'll pick the first one it finds so if you have a hero a layout that has a hero image it's a huge beautiful image at the top. And the admins upload that then you don't need the social image, but if they want to upload a social image they can. So if it would be there. Another one is that node summary only appears on pages that have bodies. Body fields. So if you're using paragraphs, you know, you might have this paragraph you might have not have this paragraph so you might want to, you know, check where that summary is coming from. There's a meta tag issue about in the queue about this also and some smart people are working on it and maybe this will get into the issue q someday also. And then the last thing I wanted to talk about was testing. For the meta tags, the W3C has developer tools, the Twitter card validator in the Facebook sharing. gmail.org Google has a rich results test where you can test your schemas. For the schemas especially you need it to validate or you could actually do more harm than good getting your site into Google. And there's do more Bing has one Yandex has one. And there's another link to a structured data or linter. And that is my time. There's some more sessions coming up in 13 minutes, including two of my co workers, Marky and Donna. So thank you all for coming. And I'd be more than happy to answer any questions if anybody wants to stick around, or you can always find me on the Twitter or in the Drupal Slack, or on LinkedIn.