A website without Metatags is like a shop without a signboard

AARON:
And you're live now. Alright. You can go ahead whenever you're ready.

SHANI MAURYA:
Can I start now?

AARON:
Yes.

SHANI MAURYA:
Hi, everyone. Good afternoon. Welcome to my session: A Website Without Meta Tags Is Like A Shop Without A Signboard, OK?

AARON:
(INAUDIBLE)

SHANI MAURYA:
Are you saying something, Aaron?

AARON:
No, sorry. There was an echo in the audio. OK, I fixed it now. Sorry, go ahead.

SHANI MAURYA:
Yeah. OK. Hi everyone. Good afternoon. Welcome to my session: A Website Without Meta Tags Is Like A Shop Without A Signboard. So I will explain something about myself. I'm working since last three years in PHP, as a web and Drupal developer, and web development. I play a role, Drupal engineer at Axelerant Technologies Private Limited. I worked across multiple projects like multilingual, migration, media, and publishing sets. And I also contributing in Drupal community. I also part of the DrupalCamp Mumbai in 2019. And apart from my work, I like to travel and explore new places, like mountains and its natural environment related places. So before going to, on my agenda, I will give you some context on the topics about the meta tags. Nowadays, many higher education institution and non-profit organizations have large amount of content available on their website. And it's getting harder to explain what your website is all about without revealing too much information. And even when we see our material on any social media like Facebook or Twitter, it lacks the necessary information to grab the interest of your audience and encourage them to go to your website or your content to learn more about it.

Meta tags allows us to automatically provide a structured metadata about your site and individual pages. And apart from this, in context of the search engine optimization, providing an extensive set of meta tags may help improve your site's and page's ranking on the Google, thus may add with achieving a more prominent display of the content within such individuals. And in this session, we will go through the meta tags modules and what are the sub-modules meta tags provides and its features we can use in our upcoming slides. And how we can configure the meta tags across our websites. And the next we will see how we can configure the meta tag for the Twitter Card, which can be used for the content setting on the Twitter. And we configure the Open Graph for the Facebook. And apart from then, we can also see how we can customize meta tag value programmatically. In some cases, we have some specific condition where we need to put our own custom meta tags. So for that, we will see the customization value of the meta tag.

So let us start. So meta tag modules. So Drupal provides a meta tag module as a contributed modules. It allows users to configure and structure metadata as a meta description, title, abstracts, keywords, canonical user, canonical URLs, and images. And apart from this, meta tags provide wide range of support for the other meta tags (INAUDIBLE), like Open Graph Protocol, which is used for the Facebook tags, like image, description, title, which you will use there on your Facebook or social media. And Twitter Cards. Twitter Cards also use the same things as the Open Graph, but it is used for the Twitter social platform. And apart from this, it also provides the favicons, mobile and UI adjustments, Pinterest and Google Plus, and also provides the support for the views, views pages. We can also add our own custom tags for the specific view pages. So these are the many custom modules, sub-modules which meta tags provides, like custom routes. We can also add the meta tags based on our routes, custom routes.

Suppose we are creating any custom pages, custom forms, so we can set our meta tag content just by the configuration pages. And we have also Dublin Core meta tags. And we have also (UNKNOWN) support for the page manager, and many more we have of the sub-modules in the meta tags. So how we can start to configure metatags on a website? So first we need to download the modules. So always it is recommended to download your modules using the command, because Composer download all the dependency. So whenever any modules has its dependent on other module, then you no need to taken care of it. Composer command will take care of that. And once you downloaded that, just hit the drush en metatag. It will enable the metatag module and dependent module as well, as metatag each dependent on the token modules. So once you download the metatag, it also automatically download the tokens and when you install the metatag, it automatically install the metatag modules. Or else you can manually download and manually install.

But that is not a recommended way to do that. So once you download the module, you will get the configuration form. Under the config section, admin/config/search/metatags where you will get the config from. Here there's lot of sections coming by default. First one is Global. Global is used for the across all the sites. If you don't set any metatags or any pages, then Global will be solved the meta tags of those pages. Front page is usually used for the front page. Content is used for your content types, notes. Taxonomy is used for the taxonomy terms. User used for the users. And same we have the 403 and 404 pages as well. And in next slides we will see how we can configure the meta tags globally. So configure the default meta tags for all the pages in the global, we can configure it in global config section. What we will define in the global config section, it will apply all the pages unless until it is not overridden by any other configurations in their respective configuration sections.

So it has basically two parts: basic and advance. Basic system have mandatory metatag like page title, description, abstract, keywords. And in Advance, we have some few more advance data types like image, robots, robot crawlers. We have set the robot.txt file but we can handle that part from the metatag as well. Canonical URL's, geographical, image tag and many more. So I will show you how we can configure the metatags on your site for the global. So you have to go on the metatags. I have already installed the modules. So I just direct going to metatags configuration page. And here you will get the global page. Once you read, you will get the complete config form to edit and to add your custom metatags. Here is you will get the advance and basic. In basic tags, you will set the page title, description. You can set your custom description if there is not any token you have to show the description, else you can also use the token for the site's logo. So just put any custom tag, that custom tag's output.

Any token from here you can also browse tokens from this sections. So you will get all the tokens available on your sites. And you can define your abstract and keywords and also you can set the canonical URL's and in the robot, here this is the main part. This is the mandatory part you always need to take care of. By checking this check box, it allows search engine to index these pages. So we no need to taken care of from the search API's or we have to define the robot.txt file. It should be allowed or not allowed. So just we have to do the one few checkbox and it will do your job. And you can add the shortlink URL's, new keywords and many more. You will get here. And save the config file, config form, and you are set to go. So please note whenever you update your metatags here, you need to clear the cache. Then after you will get the output of the metatags on your pages. So I am clearing the cache on my google site. It will take small time. Yeah. This is clear. Let's go to page. It's taking time to load because of cache clear.

So when you view the source code, you will get the meta tags here. Description, which we add manually custom text, shortlink URL, robots, it's allow robot crawler to crawl your pages and index in the search API. So by using this we can configure the meta tag globally for your site. It apply over all your sites, until unless you did not set any other meta tags in this instance. If it did not overwrite here, then it will be applied to all your other sites. And next we will see configure for the content type. So we can set the meta tag globally, but we have the contents, content types and nodes. So we have some conditions for some content type, meta tags will be different, and for some content type, meta tags will be different. And we also set the meta tags as for the content or labeling as was in the nodes. So we will see how we can configure the meta tag for the content type. So before this, you have to add the default meta tags. You have the content here, but this will be applied all over the content.

But you want to add the content for the specific content type then you have to add default meta tags on here. And select your content type, let's... For example, for the article content type. And when we see article content type, then by default, these two are selected. And we have to save. Please note, when you created your meta tag, the form meta tag types for the article, then you have to go to settings here, and allow basic tags and advanced for the article content type from here, and save it. And even you can also provide the length for the meta tags. Like your description is too lengthy, so you can crop at the particular number of the characters. And then we can also analyze our title length. Like that we can describe all the other things. And save the configuration. And we will go back to meta tags and edit the content article. Here we see one link two types of meta tags. First one is basic, second one is the advanced one. So here we'll set the title. Let's say, node:title, node:summary, and we will use the same (UNKNOWN) for the abstract as well.

And we will use the text node:field_tags for the keyword. And in advanced, we can use the node:url for the canonical URL, and we allow the search index to index our content pages and we can also go add the images as well. We can type our token here or else we can take token from here. (UNKNOWN) suppose I have to add the token for the image in this way. So I go to nodes, just scroll down to image. In image you have to go to files. In files you will get the URL of the file. Just click here and this field will be editable. And you can also add whatever you want to add based on your requirement. But these are the basic things which we need to add the meta tags in our site. Let's save it. And we are set to do the meta tag part of the content article. So before saving the metatags on the source code, you have to clear the cache. As I mentioned, whenever you save the configuration in the metatag, we have always clear the cache. And let's go to content. Here we will view on article content type.

Let's do this one. And let's open the source code. Let's see. Here you will see your metatags are all saved. So you will see robots, image src, which we give. Description, abstract, keywords, the data text field. In this way, we can set our metatags for the content type, specific content type. These meta tags will only apply to the article content types, not for other contents. And there are two slides. In the next slide, we will see how to add the metatags based on the node. We see configure the metatag for the content type, but in some cases, we want to add the metatags for the specific node. So metatags provides field, metatag type. So that help us to add the metadata in our node, based on our own conditions, and based on the particular node requirement. We will take the example of the basic page here. So let's go in the manage field. You need to add a new field. Our data metatag, data is a metatag. And give the label whichever you want. Save. Save the first setting. Save the setting.

Save. We added the fields, now we go to content, and edit any content, or add new any content. Let's edit our existing content of basic page content type. So here you will get a new section for the metatags. Here, by default, metatags is common, which we set for the content. So we can change it and give our own description. Let's say we want to see our own custom, and we want to pass node description in the abstract. And in the page title, we just want to pass the site name, so we can handle metatags just for this particular node, not for all other. And even you can add your own, the metadata form or the other fields as well, whichever you want. Just go here and save. So as we added the new metatags, so we have to clear the cache again, because metadata is left only when we clear the cache. So we will view this content, and we will see tags state on node. We will view the source code. Let's see. The description which we give is set. This state that this is only for this content, this node.

So this robot came from the content one, which we set here. Yes, just give me one minute. From this, it can inherit the metatags from the global and the content. So whenever we are setting the node for any node, then you have to uncheck all other which are not wanted in the meta tag section on the node edit form. So here you can just go there and in advance, here, you need to check. So you don't want to index this space, this is not required to come in the search engine. So you can uncheck and save it. And just build the... Again, we need to clear the cache to display all the tags. So we will see how we can add the meta tag for the particular node. And next, we will see how we can add the meta tags to our view pages. So to add the meta tag for the view pages, a meta tag provides the sub-modules called meta tag views. It allowed us to override the tags for the view pages, which whatever you want to add. By enabling this module, you will get a new setting or new view pages. I will show you.

I have already installed the modules, our meta tag views. Let me show the modules. So (INAUDIBLE). I already enabled this module. So I will show you how we can add the meta tags for any view pages. Let's see. We will see for the front page. In the meta tags, we already saved the tags for the front page, already we saved, but we want to override it. So we go on the page, and in this section we will get the meta tags. By clicking on this, we will get the (UNKNOWN). And here we also use the token as well. These are the token available. Let's suppose in the page title, I just want the site show them our site name. In description, I just want a normal text, let's say player info. And in advance, you have any specific then you can add, and you can also add the canonical URL. It helps, this field it help us to eliminate the duplicate content from the search engine. This meta tag, it's very helpful when we setting the tags for the e-commerce website. On the e-commerce website, we have the multiple portals.

So this meta tags is very helpful to avoid the duplicate content entities on the search engine. And let's apply here and save the view pages. Run the node front page. See. On description, we have saved the player info front page. In this way, we can also serve them metadata for the view pages as well. So meta tags is not only to set the product content types, nodes, and view pages. More than that, we can also set the tags for the Twitters. So whenever we share any content on any social media, like whenever you're sharing our content on the Twitters, so sometimes content are missing. Sometimes they're just there in the URL. So that you are not giving too much information to the audience that interacts that motivate them to learn about your articles and your tweets. So by configuring the Twitter Cards, the meta tags, we encourage them to go there and give the clarity about, this is about these particular things, this is interesting, so we should read about this. So this can achieved by the Twitter Cards.

And Twitter cards provide the various type of the cards, which is (UNKNOWN). First one is the Summary card. In summary card, it display only the title, description and thumbnail. And second one is the Summary Card with Large Image, which is the most used card in the Twitter card. It is similar to summary card, but it's also solve the larger images with. And app card that give you a direct download to a mobile app, player card display the video, audio media. So I will show you how we can configure it. Excuse me. So let's configure the Twitter card. So for this, we have another sub-modules called meta tag Twitter. I have already enabled it. So just I will show you. So this is the module which provides the Twitter cards, and we will configure the Twitter cards for the article content type. So first we go to on the settings, after enabling the module, and select the content article. And here we have to enable this checkbox. Just click there and save the configuration. Then go back to the metatag default and edit this configuration form.

And here, you will get the one additional section, to configure your metadata. So here is the card type. As I told you, there is multiple type card summary. Summary, summary with image, app card, and player card. So there is the many cards. So we will play with the summary card with large image, which is the mostly used card type. So here we will give the description, node:summary. We can use the token. You can browse. You're able to confirm here. You can also use your Twitter handle account, add your Twitter handle account. Title, which will show in the card. And these all are the optional things, but you can set if you want. And you can also add the page URL, and most importantly, the image URL. When you are adding the content meta tag, with the summary card with large image, then don't forget to add the image URL (INAUDIBLE) it will make the card view on the Twitter. And also don't forget to add the alternate text as well. And, of course, from this, there are a lot of things, iPhone app ID, iPhone app name, App Store country, media player URL, many more.

Even you can add the data label, MP4, everything everything. And click on the save button. And we can view here. Our tags are set for the Twitter. So card type, this is the type of the card. On basis of this value, card will be displayed on the Twitter. So we need to clear the cache here again. And we have to update the configuration form. So we need to clear the cache in order to reflect our changes under content type. All set. Let's look at this content. This is the article content. We have configured for the article content type. And we will view the source code to verify our meta tags are set or not. Here, all our Twitter meta tags are set. Twitter cards. On the basis of this, card will be decided on the Twitter handler. And these are the content to show under the tweets. So you can just copy this link, and based on the Twitter it will be also. This is my local site, so it will be not reflect on the Twitter. So you can also preview a card here, but for me it will not show, because my local site is not public.

So it's unable to face, because this is not a public site. So when you hosted your site on the server, then it will work. Then it will show you the green signal. Here it is. And you also saw the preview of the card. So in this way you can configure your metadata for the Twitter. Then in this the most important thing you have to think about is Twitter image. And always verify the image link as well, just copy and open in the new tab, it's showing or not. If it's not showing using this link, then it will be going to break on your Twitter handle as well. So don't forget to verify this link as well, because sometimes, with the right URL (UNKNOWN) images are deleted from our files (UNKNOWN), then it gets broken on the content. So always verify the image is showing or not. So here is image showing, which means it's working fine and we're all set. And, similarly, we can also do for the Facebook. And for the Facebook, meta tags to add is Open Graph Protocol sub modules. So here we have the meta tags like og:url, og:title, OG is for Open Graph.

So Open Graph is used for the Facebook, Google Plus, Pinterest, like social platforms. And we use the og:description, og:site_name, og:updated_time, it will store the timestamp of the content updated. So you have any content which you want for the user to see the web contents get updated, so you can also use the og:updated_time. So I will show you how we can configure it for the Facebook (INAUDIBLE). So just like Twitter cards, we have the Open Graph where we have to enable this module. I already enabled it, and you need to go, again, in your configure in the settings. (INAUDIBLE) here you need to select the Open Graph and save the configuration. And you can edit here content article to manage your tags. You will get your one extra (UNKNOWN) that is the Open Graph. So here you can add your site names, determiner if you want to add, content type, from which content allocation belong, page url, titles and many things, and description, yes you can also put the summary, or any other custom tags, or you can also put the node:summary token here.

It will fetch the data from here. Summary of the (UNKNOWN) And don't forget to add your image token here. You can add image token from the browse token (UNKNOWN) or you can just type node:field_image:entity:url. And here we are getting the second image URL. So this URL is the fallback. If this field value is empty, then it will be used. Suppose sometimes in the content we arrive to add images, but we want to show the images when we (UNKNWON), so this token will start the content, we get the value from the content, but your own custom part like this. And so it will be (UNKNOWN) value, works as fallback image. And image type, what are the types of... These are the optional things, you can use this, but whether this is required or not, (INAUDIBLE). And as well the image:alt tag with images matching the alt tag will be so, and there is lots of things in the OG, you have the image (UNKNOWN) as well. If you want you have ISBN number as well here, if you have any content related to your books publication, then you add your ISBN numbers of the books related to contents and you can also mention about the author or that content or any books you are going to publish on your websites.

And you can also have metatags for the audio. Sometimes we saw, we are setting some contents, then automatically with the audio is attached to that saved content. So we can use the URL here, automatic audio will be (UNKNOWN). This will (UNKNOWN). And save here. And, again, we have saved the configuration form, and we have to clear the cache again. Excuse me. Cache clear is done. Let's go to the site. We observe the content metatags for the article content tags. We will see many of our contents. Let's do this content. Just go to the source code. And see, here you will get all the tags. (UNKNOWN). Site name, your content type, URL, title of the page, description, this is much needed, and image. These are the mandatory (UNKNOWN). And you need to first confirm the image is working or not. Very good. And like the Twitter, we also have the Facebook debugger, you can debug your content here as well. But, again, my side is on the local environment, so it will be not debugged. So sites would be accessible to the public, publicly.

So in this way, we can configure the meta tags or the Facebooks as well. And this is the important things to have the meta tags for the Twitters and Facebook, because many times you are setting the contents on social platforms, but the information are missing. It helps user to get the idea about just seeing author post. And after they will get interest on that, and they will go hit on the link, and they will read about your articles and about your content. And it will give the good result on the search engine optimization, and it will increase some site presence on the ranking on the Google page. And after that, and in some places, we have to add our own custom meta tags. We already set the meta tags for the front page and for the article content type, but at the certain points, we want to add our own custom meta tags. We also considered from the node as well. But if that value is not (UNKNOWN) label, in that case, we need to set our different meta tags as well. So this kind of customization can be achieved by the meta tags hooks (UNKNOWN) that can be achieved.

And it's provide the method. From that we can obtain the meta tag of any entity. Suppose we have a node entity, and we want to get all the meta tags, which we are set on the content article form, and we want to get all (UNKNOWN), and based on that we need to do some customization. Suppose that we can use just meta_tag_generate_entity_ metatags method, and pass the entity. Here you can pass the entity as node, as a (UNKNOWN), as a user, front page, or any other page entity. So in the meta tags variable, will get all the meta tags related to this entity. And next slide, here, we can see all meta tags alter... Hooks. Here, meta tags, the special tags to add at the page, context for the current meta tags being generated. And here, for the front page, suppose if you want to don't show the meta tags, just make it the node. We can also set from the (UNKNOWN). And we can also set the node from here. And address follow some route, we want to un-set all the meta tags. We don't want to store index pages, we don't want to get on the SEO, or Google, anything, so we can just un-set all the meta tags from here.

And we can also set all the specific meta tags for these specific pages, any custom form we have. (UNKNOWN) I have custom (UNKNOWN) players info (UNKNOWN). So just here we can pass our question in just, for example, I'm going to use the image, set my custom by default image, so here we can og:image or og:image_url. And for the Twitter card types, what is the card types for the Twitter? Summary_large_image. And Twitter cards image, image URL. So in this way, we can customize our meta tags, and customize the value of the meta tags based on our own custom requirements. So in this session we'll see what is the meta tag and what are the importance we see until now, and how we can configure for the content types, for the specific node, and even for the view pages, and how we can make more generic or more authentic to user to view on your post on the social sites, from Twitter or Facebook. We can also configure our meta tags from the Twitter cards and Open Graph. So that's the things from my session.

So open for the question. Do you have any questions? So please ask. I am happy to say my thoughts on your questions, will help you.

AARON:
Any questions here? No questions here.

SHANI MAURYA:
I hope everyone get, more or less get, outcome from the sessions.

AARON:
Yeah, thank you very much for...

SHANI MAURYA:
You can also reach out to me at Drupal Slack, Shani Maurya on Drupal Slack. I will be happy to help you, if you have any questions. And last, but not the least, the contribution day will be happening tomorrow from 10am to 4pm, so participate and contribute for the Drupal community. Thank you. Thank you very much for listening.

AARON:
Thank you.