diff --git a/README.md b/README.md
index c0b33b4f..c60e8196 100755
--- a/README.md
+++ b/README.md
@@ -211,6 +211,44 @@ If you are trying to contribute to the Enable site from a forked version of this
 
 You will need to update the version number that NPM broadcasts as the latest version number. Please use [np](https://github.com/sindresorhus/np) to do this (it is what we have used in the past). This should be done by development lead of the Enable project (as of this writing, this is [Zoltan Hawryluk](https://www.npmjs.com/~zoltandulac)).
 
+### Strcutured Data Markup
+
+Structured Data Markup is a way to label or tag the content on your website so that search engines and other platforms can better understand it.
+
+The Article and HowTo tags are two types of structured data markup that help search engines understand specific kinds of content.
+
+#### Article Tag:
+
+This is used to mark up articles, blog posts, or other written content. By using the Article tag, we help search engines identify the main parts of your article, like the headline. This can make your article show up better in search results, sometimes with extra features like the headline or image preview.
+
+#### HowTo Tag:
+
+This is used for content that gives step-by-step instructions on how to do something. When you use the HowTo tag, search engines can display your instructions in a more detailed way, often showing each step directly in the search results.
+
+Example of checkbox in the meta-info.json, where the mainEntity can be an array of 'Article' and 'HowTo' objects extracted from page:
+
+```json
+"checkbox.php": {
+    "title": "How to Create Accessible Checkboxes",
+    "desc": "Here is a step-by-step guide to creating accessible checkboxes",
+    "url": "https://www.useragentman.com/enable/checkbox.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "A real styled HTML5 checkbox",
+      "desc": "You can style an HTML5 checkbox using CSS easily.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#a-real-styled-html5-checkbox--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the styled checkboxe accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the styled checkboxe accessible",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-1"
+      },
+  ]
+}
+```
+
 ## References
 
 When testing using screen readers, these resources may be of help to you:
diff --git a/content/body/acknowledgements.php b/content/body/acknowledgements.php
index d8716611..02539679 100644
--- a/content/body/acknowledgements.php
+++ b/content/body/acknowledgements.php
@@ -17,6 +17,8 @@
 </p>
 
 <ul>
+  <li><a href="https://github.com/saumyajitc">Saumyajit Chowdhury</a> for implementing husky pre-commit hooks to run lint-staged before pushing code to the repository</li>
+  <li><a href="https://github.com/majid-paktinat">Majid Paktinat</a> and <a href="https://github.com/akshaypanchal">Akshaykumar Panchal</a> for implementing dynamic Structured Data Markup for improving the SEO of the Enable Project.</li>
   <li><a href="https://github.com/alisonhall">Alison Hall</a> for cleaning up and streamlining the unit testing and automated testing NPM tasks (and also doing the difficult task of updating the NPM packages within the project in 2024).
   </li>
   <li>Sahil Singh for unit tests for the <a href="input-mask.php">input mask component</a>.</li>
@@ -30,6 +32,7 @@
 </p> 
 
 <ul>
+<li><a href="https://github.com/saumyajitc">Saumyajit Chowdhury</a> for implementing deployment procedures in <a href="https://enable-a11y-react-iqpmwl8kb-publicis-sapient-sandbox.vercel.app/" target="new">Vercel</a> for <a href="https://github.com/PublicisSapient/enable-a11y-react" target="new">Enable(react version)</a> and create npm package for external use of the accessible components.</li>
   <li><a href="https://twitter.com/lsnrae">Alison Walden</a> for her UX guidelines for both <a
       href="https://lsnrae.medium.com/if-you-must-use-a-carousel-make-it-accessible-977afd0173f4">accessible
       carousels</a> and <a href="https://lsnrae.medium.com/accessible-form-validation-9fa637ddb0fc">form validation</a>
diff --git a/content/body/focus-styling.php b/content/body/focus-styling.php
index 358a33c7..839d0154 100644
--- a/content/body/focus-styling.php
+++ b/content/body/focus-styling.php
@@ -1,3 +1,17 @@
+<p>
+  Before we dive into making focus outlines accessible, let's first understand what a focus outline is and why it’s important for web accessibility, particularly for screen readers. 
+  If you're already familiar with focus outlines, feel free to skip to the next section. For those who aren’t, here's a brief definition.
+</p>
+
+<h2>What is a Focus Outline?</h2>
+
+<p>
+  Simply put, when a specific HTML element is ready to accept keyboard input, it is considered to be "in focus." 
+  As users navigate a webpage using the keyboard (typically via the Tab key), different elements receive focus, allowing screen readers to read their content. 
+  According to accessibility standards, any element in focus should have a visible border around it, known as the focus outline. This helps users, especially those relying on screen readers or keyboard navigation, to know which element is currently active.
+</p>
+
+
 <p>
   Focus states are used by keyboard users to know what interactive element they can currently manipulate. They are easily
   styled with the <code>outline</code> CSS property and the <code>:focus</code> and <code>:focus-visible</code> pseudo-classes.
diff --git a/content/body/form-error-checking.php b/content/body/form-error-checking.php
index ad15b276..473074a0 100644
--- a/content/body/form-error-checking.php
+++ b/content/body/form-error-checking.php
@@ -271,29 +271,6 @@
       }
       </script>
 
-      <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@type": "WebPage",
-        "name": "Accessible Form Validation: HTML5 and Custom Approaches",
-        "description": "Learn how to make form validation and error checking accessible using HTML5 and custom validation methods. Includes code examples and best practices.",
-        "url": "https://www.useragentman.com/enable/form-error-checking.php",
-        "mainEntity": [
-          {
-            "@type": "HowTo",
-            "name": "Using HTML5 for Accessible Form Validation",
-            "text": "You can use just the required and pattern attributes on HTML forms to do client-side validation without JavaScript.",
-            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-native-html5-validation--heading"
-          },
-          {
-            "@type": "HowTo",
-            "name": "Using Custom Validation for Accessible Form Validation",
-            "text": "You can use enable-a11y node package to handle client-side form validation and error messages.",
-            "url": "https://www.useragentman.com/enable/form-error-checking.php#using-custom-validation--heading"
-          }
-        ]
-      }
-    </script>
 
       
 <?= includeNPMInstructions("accessibility", [], null, false, [
diff --git a/templates/data/meta-info.json b/templates/data/meta-info.json
index 6275b255..b99b6090 100644
--- a/templates/data/meta-info.json
+++ b/templates/data/meta-info.json
@@ -16,8 +16,29 @@
     "wip": true
   },
   "alert.php": {
-    "title": "ARIA Alert",
-    "desc": "How to let screen reader users know when new information appears on the page using the ARIA alert role or the HTML5 output tag"
+    "title": "ARIA Alert: Understanding, Live Example and Code Walkthrough",
+    "desc": "Learn about the ARIA alert property, how it enhances web accessibility, and explore practical examples with code samples. Master ARIA alerts for better UX.",
+    "url": "https://www.useragentman.com/enable/alert.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "ARIA Alert",
+      "desc": "An alert is an ARIA live region meant for error or warning messages that appear on the screen. It is usually implied to have an aria-live value of assertive.",
+      "url": "https://www.useragentman.com/enable/alert.php"
+      },
+      {
+      "type": "HowTo",
+      "title": "Visual Alert Example",
+      "desc": "Live example of alert aria role",
+      "url": "https://www.useragentman.com/enable/alert.php#example-1-visual-alert--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Code Walkthrough for ARIA Alert role",
+      "desc": "See the dropdown to highlight each of the individual steps that make accessible aria alert",
+      "url": "https://www.useragentman.com/enable/alert.php#developer-walkthrough-1"
+      }
+  ]
   },
   "animated-gif-with-pause-button.php": {
     "title": "Animated GIFs with Pause Buttons",
@@ -39,8 +60,53 @@
     "wip": true
   },
   "button.php": {
-    "title": "Accessible Buttons",
-    "desc": "Native HTML5 buttons are the best when you have existing inaccessible code, using roles can help."
+    "title": "How to Create Accessible Buttons",
+    "desc": "Native HTML5 buttons are the best when you have existing inaccessible code, using roles can help.",
+    "url": "https://www.useragentman.com/enable/button.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "Accessible Button ?",
+      "desc": "An accessible HTML button is one that can be easily used by all individuals, including those with disabilities. Accessibility ensures that everyone, regardless of their abilities, can interact with web content.",
+      "url": "https://www.useragentman.com/enable/button.php#an-html-button---heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "An HTML Button",
+      "desc": "An HTML button is a clickable element that allows users to perform an action, such as submitting a form, triggering a function, or navigating to another page.",
+      "url": "https://www.useragentman.com/enable/button.php#an-html-button---heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Code Walkthrough to make button accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the button accessible",
+      "url": "https://www.useragentman.com/enable/button.php#developer-walkthrough-1"
+      },
+      {
+      "type": "HowTo",
+      "title": "A link with the role of button",
+      "desc": "Links can behave like a button, especially when it triggers an action rather than navigating to a different page.",
+      "url": "https://www.useragentman.com/enable/button.php#a-link-with-the-role-of-button--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "A link with the role of button and be accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the link behave like a button and be accessible",
+      "url": "https://www.useragentman.com/enable/button.php#developer-walkthrough-2"
+      },
+      {
+      "type": "HowTo",
+      "title": "A Div with the role of button and be accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the div behave like a button and be accessible",
+      "url": "https://www.useragentman.com/enable/button.php#developer-walkthrough-3"
+      },
+      {
+      "type": "HowTo",
+      "title": "Disabled HTML Button",
+      "desc": "There are two ways of making a button disabled; Using one of these attributes, disabled=true or aria-disabled=true",
+      "url": "https://www.useragentman.com/enable/button.php#disabled-html-button---heading"
+      }   
+  ]
   },
   "carousel.php": {
     "title": "Accessible Carousels",
@@ -48,8 +114,77 @@
     "isNPM": "true"
   },
   "checkbox.php": {
-    "title": "Accessible Checkboxes",
-    "desc": "This page will show you how to code HTML5 and custom checkboxes in an accessible way, including indeterminate checkboxes."
+    "title": "How to Create Accessible Checkboxes",
+    "desc": "Here is a step-by-step guide to creating accessible checkboxes",
+    "url": "https://www.useragentman.com/enable/checkbox.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "A real styled HTML5 checkbox",
+      "desc": "You can style an HTML5 checkbox using CSS easily.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#a-real-styled-html5-checkbox--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the styled checkboxe accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the styled checkboxe accessible",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-1"
+      },
+      {
+      "type": "Article",
+      "title": "A DIV with a role of checkbox",
+      "desc": "If you come across a <div> in that is marked up like a checkbox, that is not accessible",
+      "url": "https://www.useragentman.com/enable/checkbox.php#a-div-with-a-role-of-checkbox--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the styled checkboxe accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make a <div> that is marked up like a checkbox accessible",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-2"
+      },
+      {
+      "type": "Article",
+      "title": "HTML checkbox group",
+      "desc": "If you have a group of checkboxes, you could use <role='group'> instead of fieldsets",
+      "url": "https://www.useragentman.com/enable/checkbox.php#html-checkbox-group--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make a group of checkboxes accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make a group of checkboxes accessible",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-3"
+      },
+      {
+      "type": "Article",
+      "title": "Indeterminate Checkboxes Using Native HTML",
+      "desc": "We usually think of checkboxes being either checked or unchecked. There is a third possible state: indeterminate. Note that this indeterminate state can be set via JavaScript. There is no indeterminate HTML attribute.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#indeterminate-checkboxes-using-native-html--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step Indeterminate Checkboxes Using Native HTML",
+      "desc": "See the dropdown to highlight each of the individual steps that make the example accessible.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-5"
+      },
+      {
+      "type": "Article",
+      "title": "Indeterminate Checkboxes Using ARIA",
+      "desc": "Just like two-state checkboxes, we can use ARIA to create faux checkboxes.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#indeterminate-checkboxes-using-aria--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step Indeterminate Checkboxes Using ARIA",
+      "desc": "See the dropdown to highlight each of the individual steps that make the example accessible.",
+      "url": "https://www.useragentman.com/enable/checkbox.php#developer-walkthrough-7"
+      },
+      {
+      "type": "HowTo",
+      "title": "How to Install the Hierarchical Checkbox Library into Your Projects",
+      "desc": "See the step-by-step installation guide for the Hierarchical Checkbox Library",
+      "url": "https://www.useragentman.com/enable/checkbox.php#how-to-install-the-hierarchical-checkbox-library-into-your-projects--heading"
+      }
+  ]  
   },
   "combobox.php": {
     "title": "Accessible Autocomplete (a.k.a Combobox)",
@@ -80,12 +215,60 @@
     "desc": "Often overlooked, self-contained content that is references in a document, like a photo, chart, diagram or code, should be marked up as a figure to help screen reader users understand context."
   },
   "focus-styling.php": {
-    "title": "Focus Styling",
-    "desc": "Many designers will turn off focus styles on web apps. There are better solutions that ensure they appear for only the users that need them."
+    "title": "How to Create Accessible Focus Outlines in CSS",
+    "desc": "Explore best practices for focus outlines in web design. Improve accessibility and keyboard navigation with our comprehensive guide.",
+    "url": "https://www.useragentman.com/enable/focus-styling.php",
+    "mainEntity": [
+      {
+        "@type": "Article",
+        "title": "What is Focus Outline?",
+        "desc": "when a specific HTML element is ready to accept keyboard input, it is considered to be 'in focus.' As users navigate a webpage using the keyboard (typically via the Tab key), different elements receive focus, allowing screen readers to read their content",
+        "url": "https://www.useragentman.com/enable/focus-styling.php#what-is-a-focus-outline---heading"
+      },
+      {
+        "@type": "HowTo",
+        "title": "Focus Styling for Keyboard Users Only",
+        "desc": "How to style focus outline specially for keyboard users",
+        "url": "https://www.useragentman.com/enable/focus-styling.php#focus-styling-for-keyboard-users-only--heading"
+      },
+      {
+        "@type": "HowTo",
+        "title": "Increase Hit Area Inside Focusable Elements",
+        "desc": "Identify all focusable elements on the page and evaluate their hit area.",
+        "url": "https://www.useragentman.com/enable/focus-styling.php#increase-hit-areas-inside-focusable-elements--heading"
+      },
+      {
+        "@type": "HowTo",
+        "title": "Issues with CSS Transitions and CSS Outline in Safari",
+        "desc": "Understand common issues with CSS transitions and CSS outline in Safari.",
+        "url": "https://www.useragentman.com/enable/focus-styling.php#issues-with-css-transitions-and-css-outline-in-safari--heading"
+      },
+      {
+        "@type": "HowTo",
+        "title": "Considerations for Windows High Contrast Mode Users",
+        "desc": "Test your website in Windows High Contrast mode to identify any accessibility issues.",
+        "url": "https://www.useragentman.com/enable/focus-styling.php#don-t-forget-windows-high-contrast-mode-users---heading"
+      }
+    ]
   },
   "form-error-checking.php": {
     "title": "How to Ensure Accessible Form Validation and Error Checking",
-    "desc": "Learn how to make your form validation and error checking accessible. Follow best practices to ensure your web forms are compliant with WCAG guidelines and user-friendly for everyone."
+    "desc": "Learn how to make your form validation and error checking accessible. Follow best practices to ensure your web forms are compliant with WCAG guidelines and user-friendly for everyone.",
+    "url": "https://www.useragentman.com/enable/form-error-checking.php",
+    "mainEntity": [
+      {
+        "@type": "HowTo",
+        "title": "Using HTML5 for Accessible Form Validation",
+        "desc": "You can use just the required and pattern attributes on HTML forms to do client-side validation without JavaScript.",
+        "url": "https://www.useragentman.com/enable/form-error-checking.php#using-native-html5-validation--heading"
+      },
+      {
+        "@type": "HowTo",
+        "title": "Using Custom Validation for Accessible Form Validation",
+        "desc": "You can use enable-a11y node package to handle client-side form validation and error messages.",
+        "url": "https://www.useragentman.com/enable/form-error-checking.php#using-custom-validation--heading"
+      }
+    ]
   },
   "form.php": {
     "title": "Accessible Form Structure",
@@ -123,12 +306,54 @@
     "isNPM": "true"
   },
   "log.php": {
-    "title": "Accessible Log Displays",
-    "desc": "When you want up-to-date inbound information, like chat history or error logs, to be consumed by users of assistive technology, use the log role."
+    "title": "Accessible Log Display: Understanding, Live Example, and Code Walkthrough",
+    "desc": "Discover how to implement an Accessible Log Display with a live example and detailed code walkthrough. Enhance web accessibility with best practices.",
+    "url": "https://www.useragentman.com/enable/log.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "What is Accessible logs ?",
+      "desc": "The log role is an ARIA-live region where new information is added in a meaningful order and old information may disappear.",
+      "url": "https://www.useragentman.com/enable/log.php"
+      },
+      {
+      "type": "HowTo",
+      "title": "Visual Accessible Log Display Example",
+      "desc": "Live example how accessible display log works",
+      "url": "https://www.useragentman.com/enable/log.php#example-1---heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Code Walkthrough for Accessible Log Display",
+      "desc": "See the dropdown to highlight each of the individual steps that make accessible logs",
+      "url": "https://www.useragentman.com/enable/log.php#developer-walkthrough-1"
+      }
+  ]
   },
   "marquee.php": {
-    "title": "The Marquee (a.k.a. Auto-Scrolling Content)",
-    "desc": "Non essential information that updates frequently should be coded so screen reader users know it's there, but that it doesn't annoy them."
+    "title": "Mastering Marquee: Auto Scrolling Text with Live Example and Code Samples",
+    "desc": "Learn how to create an auto-scrolling Marquee for your web pages. Explore a live example and get detailed code samples to implement it effortlessly.",
+    "url": "https://www.useragentman.com/enable/marquee.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "What is Marquee?",
+      "desc": "Marquees (a.k.a. Auto-Scrolling Content) are meant for content that scrolls or updates consistently, like a stock ticker or a news feed.",
+      "url": "https://www.useragentman.com/enable/marquee.php"
+      },
+      {
+      "type": "HowTo",
+      "title": "Accessible Auto Scrolling (Marquee) Example",
+      "desc": "Live example of News Ticker to understand how marquee works",
+      "url": "https://www.useragentman.com/enable/marquee.php#example-1-news-ticker--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Code Walkthrough for Accessible Marquee",
+      "desc": "See the dropdown to highlight each of the individual steps that make accessible auto scrolling (marquee)",
+      "url": "https://www.useragentman.com/enable/marquee.php#developer-walkthrough-1"
+      }
+  ]
   },
   "math.php": {
     "title": "Accessible Math Equations",
@@ -159,8 +384,59 @@
     "desc": "HTML5 Progress Bars should be coded so users who use screen readers and assistive technology know they are there what they are trying to tell them."
   },
   "radiogroup.php": {
-    "title": "Accessible Radio Groups",
-    "desc": "They way radio buttons are made accessible is slightly different than other form controls."
+    "title": "How to Create Accessible Radio Groups",
+    "desc": "Here is a step-by-step guide to creating accessible radio groups",
+    "url": "https://www.useragentman.com/enable/radiogroup.php",
+    "mainEntity": [
+      {
+      "type": "Article",
+      "title": "Radio Buttons grouped with fieldsets",
+      "desc": "This is the recommended way of grouping radio buttons. Please look at the next few examples.",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#radio-buttons-grouped-with-fieldsets--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the group radio buttons accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the group radio buttons accessible",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-1"
+      },
+      {
+      "type": "Article",
+      "title": "HTML5 radio buttons that have custom styling",
+      "desc": "Read this to style native radio buttons like a Jedi Master",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#html5-radio-buttons-that-have-custom-styling--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the custom styled radio buttons accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the custom styled radio buttons accessible",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-2"
+      },
+      {
+      "type": "Article",
+      "title": "Custom radio buttons",
+      "desc": "making <div> and/or <span> tags look like radio buttons?",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#custom-radio-buttons-using-aria--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make the custom radio buttons accessible",
+      "desc": "See the dropdown to highlight each of the individual steps that make the custom radio buttons accessible",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-3"
+      },
+      {
+      "type": "Article",
+      "title": "An alternative to fieldsets",
+      "desc": "Replace fieldsets with an ARIA radiogroup role",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#html5-version-that-uses-radiogroup-roles---heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Step-by-Step to make replace fieldsets with an ARIA radiogroup",
+      "desc": "See the dropdown to highlight each of the individual steps that make an ARIA radiogroup",
+      "url": "https://www.useragentman.com/enable/radiogroup.php#developer-walkthrough-4"
+      }
+  ]
   },
   "skip-link.php": {
     "title": "Skip Links (That Work In Mobile Too!)",
@@ -176,8 +452,29 @@
     "desc": "Many developers think form fields with numeric values must always be coded as <input type=\"number\">.  There are exceptions."
   },
   "status.php": {
-    "title": "The ARIA Status Role",
-    "desc": "If part of a page is updated (e.g. because of an AJAX call), users of screen readers and other assistive tech need to be informed.  Enter the ARIA role \"status\""
+    "title": "ARIA Status: Understanding, Live Example, and Code Walkthrough",
+    "desc": "Learn about the ARIA status role, its importance in accessibility, and see a live example with supporting code samples to improve user experience.",
+    "url": "https://www.useragentman.com/enable/status.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "What is ARIA Status role?",
+      "desc": "Status messages allow screen readers and other assistive technology to tell users that content has changed on the page.",
+      "url": "https://www.useragentman.com/enable/status.php"
+      },
+      {
+      "type": "HowTo",
+      "title": "Visually Hidden Status Message Example",
+      "desc": "Live example of how visually how hidden status role works",
+      "url": "https://www.useragentman.com/enable/status.php#visually-hidden-status-message--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Code Walkthrough for Accessible Status role",
+      "desc": "See the dropdown to highlight each of the individual steps that make accessible status messages",
+      "url": "https://www.useragentman.com/enable/status.php#developer-walkthrough-1"
+      }
+  ]
   },
   "switch.php": {
     "title": "The ARIA Switch Role  (a.k.a. Toggle)",
@@ -246,8 +543,29 @@
     "desc": "How you can ensure that your website's typography is legible for users that adjust text-spacing because of dyslexia or due to visual or cognitive disabilities ."
   },
   "timer.php": {
-    "title": "ARIA Timer",
-    "desc": "If you have a countdown or a timer on your page, tell users of screen readers and other assistive tech when it updates without too much noise."
+    "title": "ARIA Timer: Understanding, Live Example and Code Walkthrough",
+    "desc": "Discover what ARIA Timer is, see a live example, and explore the supporting code. Learn how to implement an accessible countdown timer with ARIA roles and attributes.",
+    "url": "https://www.useragentman.com/enable/timer.php",
+    "mainEntity":[
+      {
+      "type": "Article",
+      "title": "What is ARIA Timer?",
+      "desc": "The timer role is to be used on any timer or clock, including stopwatch readouts and countdown timers. Because of the immediate nature of the information given, it is recommended you use aria-live='assertive' to announce the value of the timer.",
+      "url": "https://www.useragentman.com/enable/timer.php"
+      },
+      {
+      "type": "HowTo",
+      "title": "Accessible Timer Example",
+      "desc": "Live example of how accessible timer works",
+      "url": "https://www.useragentman.com/enable/timer.php#timer-example--heading"
+      },
+      {
+      "type": "HowTo",
+      "title": "Code Walkthrough for Accessible Timer",
+      "desc": "See the dropdown to highlight each of the individual steps that make accessible timer",
+      "url": "https://www.useragentman.com/enable/timer.php#developer-walkthrough-1"
+      }
+  ]
   },
   "tooltip.php": {
     "title": "Tooltip",
diff --git a/templates/includes/functions.php b/templates/includes/functions.php
index 43a262c0..5a90a63c 100644
--- a/templates/includes/functions.php
+++ b/templates/includes/functions.php
@@ -272,6 +272,11 @@ function getMetadata()
 
                 // Let's ensure these properties are entified.
                 foreach ($fileProps as $prop => $propValue) {
+                    // Check if the argument is not a string
+                    if (!is_string($propValue)) {
+                        // Convert the array (or other non-string data types) to a JSON string
+                        $propValue = json_encode($propValue);
+                    }
                     $fileProps->{$prop} = htmlentities($propValue);
                 }
                 return;
@@ -354,4 +359,92 @@ function getURIPrefix()
 
 getMetadata();
 
+function processJsonFile()
+{
+    global $jsonLdStrOutput;
+    $uriFile = getURIFilename();
+    $tokenToFind = trim(preg_replace("/^\//", "", $uriFile));
+    $metaFile = "./data/meta-info.json";
+
+    // Check if the file exists
+    if (!file_exists($metaFile)) {
+        echo "File does not exist: $metaFile\n";
+        return;
+    }
+
+    // Read the file content
+    $jsonContent = file_get_contents($metaFile);
+
+    // Decode the JSON content
+    $data = json_decode($jsonContent, true);
+
+    // Check if the JSON was decoded successfully
+    if (json_last_error() !== JSON_ERROR_NONE) {
+        echo "Error decoding JSON: " . json_last_error_msg() . "\n";
+        return;
+    }
+
+    // Check if the token exists in the data
+    if (!array_key_exists($tokenToFind, $data)) {
+        echo "Key '$tokenToFind' does not exist in the JSON data.\n";
+        return;
+    }
+
+    // Get the item associated with the token
+    $item = $data[$tokenToFind];
+
+    $jsonLd = [
+        "@context" => "https://schema.org",
+        "@type" => "WebPage",
+        "name" => isset($item["title"]) ? $item["title"] : "",
+        "description" => isset($item["desc"]) ? $item["desc"] : "",
+        "url" => isset($item["url"])
+            ? str_replace("\/", "/", html_entity_decode($item["url"]))
+            : "",
+        "mainEntity" => [],
+    ];
+
+    // Process 'mainEntity' to generate JSON-LD structure
+    if (isset($item["mainEntity"]) && is_array($item["mainEntity"])) {
+        foreach ($item["mainEntity"] as $entity) {
+            $mainEntity = [
+                "@type" => isset($entity["type"]) ? $entity["type"] : "",
+                "name" => isset($entity["title"]) ? $entity["title"] : "",
+                "articleBody" => isset($entity["desc"]) ? $entity["desc"] : "",
+                "url" => isset($entity["url"])
+                    ? str_replace("\/", "/", html_entity_decode($entity["url"]))
+                    : "",
+            ];
+            // Rename 'articleBody' to 'text' if type is 'HowTo'
+            if (isset($entity["type"]) && $entity["type"] === "HowTo") {
+                $mainEntity["text"] = isset($entity["desc"])
+                    ? $entity["desc"]
+                    : "";
+                unset($mainEntity["articleBody"]);
+            }
+            $jsonLd["mainEntity"][] = $mainEntity;
+        }
+    }
+
+    // Remove 'mainEntity' if it is an empty array
+    if (empty($jsonLd["mainEntity"])) {
+        unset($jsonLd["mainEntity"]);
+    }
+
+    // Remove empty attributes from the main jsonLd array
+    $jsonLd = array_filter($jsonLd, function ($value) {
+        return !empty($value);
+    });
+
+    // Output JSON-LD with pretty print
+    $jsonLdStr = json_encode($jsonLd, JSON_PRETTY_PRINT);
+
+    // Ensure slashes are not escaped in the final output
+    $jsonLdStr = str_replace("\\/", "/", $jsonLdStr);
+
+    $jsonLdStrOutput = $jsonLdStr;
+}
+
+processJsonFile();
+
 ?>
diff --git a/templates/includes/logo-link.php b/templates/includes/logo-link.php
index baa7b03a..a5888d87 100644
--- a/templates/includes/logo-link.php
+++ b/templates/includes/logo-link.php
@@ -1,6 +1,6 @@
 <div class="enable-logo__container">
     <a id="enable-logo" class="enable-logo__link" href="index.php">
-        <img class="enable-logo" src="images/ENABLE.svg" alt="" role="presentation" />
+        <img class="enable-logo" src="images/ENABLE.svg" alt="enable logo"  />
         <span class="enable-logo__text">Enable</span>
     </a>
 </div>
\ No newline at end of file
diff --git a/templates/includes/meta-info.php b/templates/includes/meta-info.php
index 385c7e1c..22ab9060 100644
--- a/templates/includes/meta-info.php
+++ b/templates/includes/meta-info.php
@@ -13,11 +13,18 @@
 <meta property="og:type" content="<?= $fileProps->type ?>" />
 <meta property="og:alt" content="" />
 <meta property="article:author" content="Zoltan Hawryluk" />
-
 <meta name="description" content="<?= $fileProps->desc ?>" />
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:description" content="<?= $fileProps->desc ?>" />
 <meta name="twitter:title" content="<?= $fileProps->title ?>" />
 <meta name="twitter:image" content="<?= $fileProps->posterImg ?>" />
+
+<?php
+global $jsonLdStrOutput;
+
+if ($jsonLdStrOutput != "") {
+    echo '<script type="application/ld+json">' . $jsonLdStrOutput . "</script>";
+}
+?>
 <link rel="icon" type="image/x-icon" href="images/ENABLE.svg">
 
diff --git a/templates/includes/stats.php b/templates/includes/stats.php
index a2942353..5e98f076 100644
--- a/templates/includes/stats.php
+++ b/templates/includes/stats.php
@@ -3,7 +3,7 @@
     if (isset($isForNewBuilds) && $isForNewBuilds == true) { ?>
         <div class="enable-stats__desc enable-stats__desc--scratch">
             <div class="enable-stats__center">
-                <img class="enable-stats__icon" src="images/icons/recommend.svg" alt="" role="presentation">
+                <img class="enable-stats__icon" src="images/icons/recommend.svg" alt="recommended solution" >
                 <span class="enable-stats__label"><?= $comment ?></span>
             </div>
         </div>