Enhance SEO and accessibility by adding Open Graph image properties and improving modal structure

Author: szolkowski

_includes/code-modal.html

@@ -13,7 +13,10 @@
     <i class="fas fa-copy"></i> Copy
   </button>
   <pre><code class="language-{{ include.lang | default: 'csharp' }} hljs">{{ code_content | escape }}</code></pre>
-</div><!-- Modal structure with only copy and close --><div id="codeModal-{{ include.id }}" class="code-modal" role="dialog" aria-modal="true" aria-label="Code viewer">
+</div>
+
+<!-- Modal structure with only copy and close -->
+<div id="codeModal-{{ include.id }}" class="code-modal" role="dialog" aria-modal="true" aria-label="Code viewer">
   <div class="code-modal-content">
     <div class="modal-toolbar">
       <button class="code-modal-close" aria-label="Close code viewer">&times;</button>

_includes/head-custom.html

@@ -14,6 +14,9 @@
 
 {% unless page.image %}
 <meta property="og:image" content="{{ '/assets/img/og-default.png' | absolute_url }}" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:type" content="image/png" />
 <meta property="og:image:alt" content="{{ site.title | escape }}" />
 <meta name="twitter:image" content="{{ '/assets/img/og-default.png' | absolute_url }}" />
 <meta name="twitter:card" content="summary_large_image" />
@@ -140,6 +143,7 @@
       "@type": "BlogPosting",
       "@id": "{{ page_id }}",
       "url": "{{ page.url | absolute_url }}",
+      "isAccessibleForFree": true,
       "headline": {{ page.title | jsonify }},
       "description": {{ page.description | jsonify }},
       "inLanguage": "en-US",
@@ -179,6 +183,7 @@
       "@type": "CollectionPage",
       "@id": "{{ page_id }}",
       "url": "{{ page.url | absolute_url }}",
+      "isAccessibleForFree": true,
       "name": "All topics — Szołkowski's Blog",
       "description": {{ page.description | jsonify }},
       "inLanguage": "en-US",
@@ -211,6 +216,7 @@
       "@type": "CollectionPage",
       "@id": "{{ page_id }}",
       "url": "{{ page.url | absolute_url }}",
+      "isAccessibleForFree": true,
       "name": {{ page.title | jsonify }},
       "inLanguage": "en-US",
       "isPartOf": { "@id": "{{ website_id }}" },

_layouts/default.html

@@ -13,11 +13,15 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon16.png">
 
+    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+
+    {%- if page.layout == "post" -%}
     <!-- Highlight.js CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" integrity="sha384-wH75j6z1lH97ZOpMOInqhgKzFkAInZPPSPlZpYKYTOqsaizPvhQZmAtLcPKXpLyH" crossorigin="anonymous">
 
     <!-- Highlight.js JS -->
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" integrity="sha384-F/bZzf7p3Joyp5psL90p/p89AZJsndkSoGwRpXcZhleCWhd8SnRuoYo4d0yirjJp" crossorigin="anonymous"></script>
+    {%- endif -%}
 
     <!-- Font Awesome CDN -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha384-/o6I2CkkWC//PSjvWC/eYN7l3xM3tJm8ZzVkCOfp//W05QcE3mlGskpoHB6XqI+B" crossorigin="anonymous">

assets/css/custom-styles.scss

@@ -13,8 +13,7 @@ ul.share-buttons li{
 
 ul.share-buttons .sr-only{
   position: absolute;
-  clip: rect(1px 1px 1px 1px);
-  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
   padding: 0;
   border: 0;
   height: 1px;