seo pass + update faq

mscoutermarsh · mscoutermarsh · commit 7536033b856c · 2025-12-31T18:28:41.000-05:00
diff --git a/_includes/head.html b/_includes/head.html
@@ -28,6 +28,25 @@
   <meta property="og:type" content="article">
   {% seo %}
 
+  {% if page.url == "/" %}
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebAPI",
+    "name": "HTML/CSS to Image API",
+    "description": "API for generating high quality images from HTML and CSS. Supports PNG, JPG, WebP, and PDF output.",
+    "url": "https://hcti.io/v1/image",
+    "documentation": "https://docs.htmlcsstoimage.com",
+    "termsOfService": "https://htmlcsstoimage.com/terms",
+    "provider": {
+      "@type": "Organization",
+      "name": "HTML/CSS to Image",
+      "url": "https://htmlcsstoimage.com"
+    }
+  }
+  </script>
+  {% endif %}
+
   {% include head_custom.html %}
 
 </head>
diff --git a/example-code/go.md b/example-code/go.md
@@ -1,10 +1,10 @@
 ---
 layout: page
-title: GoLang
+title: Go - HTML to Image Example
 parent: Example code
 permalink: /example-code/go/
 description: >-
-  Convert HTML to an image (png, jpg or webp) with GoLang + the HTML/CSS to Image
+  Convert HTML to an image (png, jpg or webp) with Go + the HTML/CSS to Image
   API. Renders exactly like Google Chrome.
 ---
 {% include intro.md language="GoLang" %}
diff --git a/example-code/index.md b/example-code/index.md
@@ -4,6 +4,8 @@ title: Example code
 permalink: /example-code/
 nav_order: 4
 has_children: true
+description: >-
+  HTML to Image code examples for Python, PHP, JavaScript, Ruby, Go, C#, TypeScript, and more. Copy-paste ready API integration code.
 ---
 # Example code
 {: .no_toc }
diff --git a/example-code/javascript.md b/example-code/javascript.md
@@ -1,6 +1,6 @@
 ---
 layout: default
-title: JavaScript
+title: JavaScript - HTML to Image Example
 parent: Example code
 permalink: /example-code/javascript/
 description: >-
diff --git a/example-code/php.md b/example-code/php.md
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: PHP
+title: PHP - HTML to Image Example
 parent: Example code
 permalink: /example-code/php/
 description: >-
diff --git a/example-code/python.md b/example-code/python.md
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: Python
+title: Python - HTML to Image Example
 parent: Example code
 permalink: /example-code/python/
 description: >-
diff --git a/example-code/ruby.md b/example-code/ruby.md
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: Ruby
+title: Ruby - HTML to Image Example
 parent: Example code
 permalink: /example-code/ruby/
 description: >-
diff --git a/example-code/typescript.md b/example-code/typescript.md
@@ -1,6 +1,6 @@
 ---
 layout: default
-title: TypeScript
+title: TypeScript - HTML to Image Example
 parent: Example code
 permalink: /example-code/typescript/
 description: >-
diff --git a/faq.md b/faq.md
diff --git a/getting-started/index.md b/getting-started/index.md
@@ -5,6 +5,8 @@ permalink: /getting-started/
 nav_order: 2
 expanded: true
 has_children: true
+description: >-
+  Get started with the HTML/CSS to Image API. Quick start guide with examples for Python, PHP, JavaScript, Ruby, and Go.
 ---
 # Getting started
 {: .no_toc }
diff --git a/getting-started/using-the-api.md b/getting-started/using-the-api.md
@@ -1,9 +1,11 @@
 ---
 layout: page
-title: Using the API
+title: API Reference - HTML/CSS to Image
 permalink: /getting-started/using-the-api/
 parent: Getting started
 nav_order: 1
+description: >-
+  Complete API reference for HTML/CSS to Image. Authentication, endpoints, parameters, batch creation, and response formats.
 ---
 # Using the HTML/CSS to Image API
 {: .no_toc }
diff --git a/guides/index.md b/guides/index.md
@@ -6,7 +6,7 @@ nav_order: 5
 has_children: true
 expanded: false
 description: >-
-  Use these guides to get started converting images with HTML/CSS to Image.
+  Guides for the HTML/CSS to Image API. Social media screenshots, debugging, styling, transparent backgrounds, and workflow automation.
 ---
 # Guides
 {: .no_toc }
diff --git a/guides/styling/transparent-background.md b/guides/styling/transparent-background.md
@@ -20,14 +20,17 @@ Create images with transparent backgrounds for logos, overlays, and more
 
 ## Implementation
 
-To render an image with a transparent background, set the background color to transparent in your CSS:
+To render an image with a transparent background, pass the CSS via the **`css` parameter**:
 
-```css
-body { 
-  background-color: transparent;
+```json
+{
+  "html": "<div class='content'>Your content here</div>",
+  "css": "body { background-color: transparent; }"
 }
 ```
 
+{% include hint.md title="Important" text="The transparent background CSS **must** be passed via the `css` parameter. Putting it in a `<style>` tag inside your HTML will not work. This is a common mistake!" %}
+
 {% include hint.md title="PNG Format Required" text="Transparency is only supported in PNG format. JPG and WebP images will render with a white background." %}
 
 ## Examples
diff --git a/integrations/index.md b/integrations/index.md
@@ -5,6 +5,8 @@ permalink: /integrations/
 nav_order: 3
 expanded: false
 has_children: true
+description: >-
+  Integrate HTML/CSS to Image with Zapier, Make, and AI assistants via MCP. No-code and low-code automation options.
 ---
 # Integrations
 {: .no_toc }
diff --git a/integrations/mcp.md b/integrations/mcp.md
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: MCP Server
+title: MCP Server - Generate Images from Cursor & Claude
 permalink: /integrations/mcp/
 parent: Integrations
 nav_order: 4
diff --git a/llms-full.txt b/llms-full.txt
diff --git a/llms.txt b/llms.txt
diff --git a/parameters/index.md b/parameters/index.md
diff --git a/use-cases/social-cards.md b/use-cases/social-cards.md
