{"id":62312,"date":"2024-06-26T15:27:09","date_gmt":"2024-06-26T09:57:09","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=62312"},"modified":"2024-06-27T18:40:28","modified_gmt":"2024-06-27T13:10:28","slug":"extending-schema-org-metatags-with-custom-modules-and-fields-a-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/extending-schema-org-metatags-with-custom-modules-and-fields-a-step-by-step-guide\/","title":{"rendered":"How to Enhance Schema.org Metatag Module in Drupal with Custom Fields"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>Schema.org is a system designed to enhance how search engines interpret your website&#8217;s content. The <a href=\"https:\/\/www.drupal.org\/project\/schema_metatag\">Schema.org Metatags<\/a> module in Drupal simplifies the process of incorporating this information, thereby improving your site&#8217;s search engine rankings and increasing the likelihood of displaying rich, informative snippets in search results.<\/p>\n<p>In this blog, we&#8217;ll explore how to expand the Schema.org Metatags module step-by-step. This will allow us to customize and use the module to meet specific needs that aren&#8217;t covered by its default settings.<\/p>\n<p>For an introduction to using the Schema.org module, you can refer to our previous blog &#8220;<a href=\"https:\/\/www.tothenew.com\/blog\/boost-your-drupal-sites-visibility-with-schema-markup\/\"><strong>Boost Your Drupal Site\u2019s Visibility with Schema Markup<\/strong><\/a>&#8220;. This will provide a foundational understanding of how to implement Schema.org markup effectively.<\/p>\n<h2>Use Case<\/h2>\n<p>To start implementing, it&#8217;s important to understand why creating custom fields in the Drupal Schema.org Metatags module is necessary. The module comes with predefined schemas containing default fields and properties for specific types of schema. However, there are often cases where additional fields are needed that aren&#8217;t available in the module&#8217;s default schemas. In such situations, custom fields allow us to add the required metadata to existing schema groups, ensuring our content meets both Schema.org standards and specific project needs.<\/p>\n<h2>Implement Custom Fields in Drupal&#8217;s Schema.org Metatags<\/h2>\n<p>Let&#8217;s start creating and adding custom fields in Drupal&#8217;s Schema.org Metatags module.<\/p>\n<h3>Prerequisites<\/h3>\n<p>To proceed with the implementation, ensure the following prerequisites are met:<\/p>\n<ol>\n<li><strong>Schema.org Metatags Module:<\/strong> Ensure the Schema.org Metatags module is installed and its version is above 3.0.0.<\/li>\n<li><strong>Custom Module:<\/strong> Ensure you have an existing custom module to which you can add the meta tag. If a custom module does not exist, create one<\/li>\n<\/ol>\n<p>Before starting the implementation, review the current snapshot of the organizational schema without any custom fields incorporated:<\/p>\n<div id=\"attachment_62303\" style=\"width: 810px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-62303\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-62303\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-05-43.png\" alt=\"Schema without custom field\" width=\"800\" height=\"509\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-05-43.png 888w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-05-43-300x191.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-05-43-768x489.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-05-43-624x397.png 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-62303\" class=\"wp-caption-text\">Organization Schema without custom field<\/p><\/div>\n<h3><b><br \/>\nStep 1: Define the Meta Tag Plugin<\/b><\/h3>\n<p>To define your custom meta tag, create a PHP class in your custom module under the directory custom_module\/src\/Plugin\/metatag\/Tag.<\/p>\n<ul>\n<li>Navigate to \/modules\/custom\/custom_module\/src\/Plugin\/metatag\/Tag.<\/li>\n<li>Create a new file named CustomField.php. (Class name can be anything according to the requirements).\n<div id=\"attachment_62304\" style=\"width: 441px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-62304\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-62304\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-51-42.png\" alt=\"Folder Structure\" width=\"431\" height=\"171\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-51-42.png 431w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-51-42-300x119.png 300w\" sizes=\"(max-width: 431px) 100vw, 431px\" \/><p id=\"caption-attachment-62304\" class=\"wp-caption-text\">Custom field folder structure<\/p><\/div>\n<p>&nbsp;<\/li>\n<li>Define your meta tag with annotations as shown below:\n<pre>&lt;?php\r\n\r\nnamespace Drupal\\custom_module\\Plugin\\metatag\\Tag;\r\n\r\nuse Drupal\\schema_metatag\\Plugin\\metatag\\Tag\\SchemaNameBase;\r\n\r\n\/**\r\n* Provides a plugin for the 'custom_field' meta tag.\r\n*\r\n* @MetatagTag(\r\n* id = \"custom_field\",\r\n* label = @Translation(\"Custom Field\"),\r\n* description = @Translation(\"A custom field for demo purposes.\"),\r\n* name = \"custom_field\",\r\n* group = \"schema_organization\",\r\n* weight = 1,\r\n* type = \"string\",\r\n* secure = FALSE,\r\n* multiple = FALSE,\r\n* property_type = \"text\",\r\n* tree_parent = {},\r\n* tree_depth = -1,\r\n* )\r\n*\/\r\nclass CustomField extends SchemaNameBase {\r\n}<\/pre>\n<p>Note: Here we have used schema_organization as a group, any other group can be used according to the requirement.<\/li>\n<\/ul>\n<h3><b>Step 2: Declare the Field in Configuration<\/b><\/h3>\n<p>To make your new meta tag available, declare it in your module&#8217;s configuration.<\/p>\n<ul>\n<li>Create a \u2018config\/\u2019 directory in your custom module if it doesn&#8217;t already exist.<\/li>\n<li>Add a configuration file for your meta tag. For example, create a file named custom_module.metatag_tag.schema.yml in the config\/ directory:\n<div id=\"attachment_62305\" style=\"width: 523px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-62305\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-62305\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-12-06.png\" alt=\"config file folder structure\" width=\"513\" height=\"108\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-12-06.png 513w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-12-06-300x63.png 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><p id=\"caption-attachment-62305\" class=\"wp-caption-text\">config file folder structure<\/p><\/div>\n<p>&nbsp;<\/li>\n<\/ul>\n<ul>\n<li>Declare field with type and label for the same:\n<div>\n<pre># The 'type' should be \"label\" for short meta tags and \"text\" for ones which\r\n# could get longer, especially ones which use a textarea field instead of a\r\n# textfield.\r\nmetatag.metatag_tag.custom_field:\r\ntype: string\r\nlabel: 'Custom Field'<\/pre>\n<\/div>\n<\/li>\n<\/ul>\n<ul>\n<li>Clear all cache.<\/li>\n<\/ul>\n<h3><b>Step 3: Test your custom field<\/b><\/h3>\n<ul>\n<li>Navigate to the \/admin\/config\/search\/metatag.<\/li>\n<li>Here we will be checking the Global metatag in the organization schema, as we have added the new custom field.\n<p><div id=\"attachment_62306\" style=\"width: 810px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-62306\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-62306\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-26-52.png\" alt=\"Custom Field\" width=\"800\" height=\"378\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-26-52.png 1228w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-26-52-300x142.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-26-52-1024x484.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-26-52-768x363.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-16-26-52-624x295.png 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-62306\" class=\"wp-caption-text\">Custom Field Addition to the Organization type schema<\/p><\/div><\/li>\n<li>After adding the custom field to the organization type schema, the final output should resemble the following snapshot:\n<p><div id=\"attachment_62307\" style=\"width: 810px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-62307\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-62307\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-03-35.png\" alt=\"Custom Field Addition\" width=\"800\" height=\"531\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-03-35.png 884w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-03-35-300x199.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-03-35-768x510.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/06\/Screenshot-from-2024-06-13-14-03-35-624x414.png 624w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p id=\"caption-attachment-62307\" class=\"wp-caption-text\">Custom Field Addition<\/p><\/div><\/li>\n<\/ul>\n<p><b>Conclusion<\/b><\/p>\n<p>Following these steps, you&#8217;ve successfully extended the schema_metatag module to include a custom meta tag within your existing Drupal module. This approach can be tailored for various types of metadata, enhancing your Drupal site&#8217;s SEO and metadata management. For more information on the schema metatag Drupal module, you may also refer to the <a href=\"https:\/\/www.drupal.org\/docs\/contributed-modules\/schemaorg-metatag\">official documentation<\/a> of the module.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Schema.org is a system designed to enhance how search engines interpret your website&#8217;s content. The Schema.org Metatags module in Drupal simplifies the process of incorporating this information, thereby improving your site&#8217;s search engine rankings and increasing the likelihood of displaying rich, informative snippets in search results. In this blog, we&#8217;ll explore how to expand [&hellip;]<\/p>\n","protected":false},"author":1637,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":581},"categories":[3602],"tags":[4862,5253,5152,2003,5994,404],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/62312"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1637"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=62312"}],"version-history":[{"count":15,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/62312\/revisions"}],"predecessor-version":[{"id":62657,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/62312\/revisions\/62657"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=62312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=62312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=62312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}