Add schema.org metadata to the index page

Dor-sketch · Jul 28, 2024 · 312c462 · 312c462
1 parent 7926ad1
commit 312c462
Showing 1 changed file with 117 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -65,6 +65,123 @@
     }
     </script>
 
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [{
+                "@type": "ListItem",
+                "position": 1,
+                "name": "Home",
+                "item": "https://dorpascal.com"
+            },
+            {
+                "@type": "ListItem",
+                "position": 2,
+                "name": "WebP Converter",
+                "item": "https://dorpascal.com/webp-converter/"
+            }
+        ]
+    }
+    </script>
+
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "FAQPage",
+        "mainEntity": [{
+                "@type": "Question",
+                "name": "What is WebP?",
+                "acceptedAnswer": {
+                    "@type": "Answer",
+                    "text": "WebP is an image format developed by Google that provides superior lossless and lossy compression for images on the web. It is a modern image format that supports transparency and animations."
+                }
+            },
+            {
+                "@type": "Question",
+                "name": "How to convert an image to WebP?",
+                "acceptedAnswer": {
+                    "@type": "Answer",
+                    "text": "You can convert an image to WebP using this online tool. Drag & drop an image or select one from your device, then click the 'Convert to WebP' button to download the converted image."
+                }
+            },
+            {
+                "@type": "Question",
+                "name": "Why use WebP images?",
+                "acceptedAnswer": {
+                    "@type": "Answer",
+                    "text": "WebP images offer smaller file sizes and faster loading times compared to other image formats like JPEG and PNG. They also support transparency and animations, making them ideal for web design and development."
+                }
+            }
+        ]
+    }
+    </script>
+
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "HowTo",
+        "name": "How to Convert an Image to WebP",
+        "step": [{
+                "@type": "HowToStep",
+                "name": "Step 1: Drag & Drop Image",
+                "text": "Drag and drop an image into the designated area or click the 'Upload Image' button to select an image from your device."
+            },
+            {
+                "@type": "HowToStep",
+                "name": "Step 2: Convert to WebP",
+                "text": "Click the 'Convert to WebP' button to convert the image to WebP format. The converted image will be downloaded automatically."
+            }
+        ]
+    }
+    </script>
+
+    <script type="apllication/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "name": "Dor Pascal",
+        "url": "https://dorpascal.com",
+        "logo": "https://dorpascal.com/favicon.png",
+        "sameAs": [
+            "https://www.github.com/Dor-sketch",
+            "https://dorpascal.com"
+        ]
+    }
+    </script>
+
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebApplication",
+        "name": "Image to WebP Converter",
+        "description": "Convert images to WebP format with this online tool. Drag & drop an image or select one from your device to convert it to WebP.",
+        "applicationCategory": "Utility",
+        "operatingSystem": "Web",
+        "browserRequirements": "HTML5, CSS3, JavaScript",
+        "url": "https://dorpascal.com/webp-converter/",
+        "image": "https://dorpascal.com/webp-converter/banner.webp",
+        "author": {
+            "@type": "Person",
+            "name": "Dor Pascal",
+            "sameAs": [
+                "https://www.github.com/Dor-sketch",
+                "https://dorpascal.com"
+            ]
+        },
+        "offers": {
+            "@type": "Offer",
+            "price": "0",
+            "priceCurrency": "USD"
+        },
+        "aggregateRating": {
+            "@type": "AggregateRating",
+            "ratingValue": "5",
+            "reviewCount": "100"
+        }
+    }
+    </script>
+
     <!-- Icons and Manifest -->
     <link type="image/png" sizes="16x16" rel="icon" href="./icons/Web/icons8-webp-16.png">
     <link type="image/png" sizes="32x32" rel="icon" href="./icons/Web/icons8-webp-32.png">