SEO

Author: lovasoa

CHANGELOG.md

@@ -13,6 +13,7 @@
   - **Ease of use** : the component can now be used to automatically format any query result as a json array, without manually using your database''s json functions.
   - **server-sent events** : the component can now be used to stream query results to the client in real-time using server-sent events.
  - The [csv](https://sql.datapage.app/component.sql?component=csv) component can now be used as a header component to trigger a download of the CSV file directly on page load. Just select the `csv` as a component without a shell before it, and the CSV will be efficiently streamed to the user''s browser. This finally allows efficiently serving large datasets as CSV.
+ - In the shell component, the site title is no longer wrapped in a `<h1>` tag, which should help search engines better understand the content of the page, and potentially improve SEO.
 
 ## 0.29.0 (2024-09-25)
  - New columns component: `columns`. Useful to display a comparison between items, or large key figures to an user.

examples/official-site/index.sql

@@ -33,14 +33,14 @@ SELECT 'Fast' as title,
 
 SELECT 'hero' as component,
     true as reverse,
-    '🧩 Batteries included' as title,
-    'At the core of SQLPage is a [rich library of components](/documentation.sql) for tables, charts, maps, timelines, forms and much more.
+    '🧩 Easy User Interface' as title,
+    'At the core of SQLPage is a [rich library of user interface components](/documentation.sql) for tables, charts, maps, timelines, forms and much more.
 
-You just populate the components with data returned by your database queries.' as description_md,
+To build your app, you just populate the components with data returned by your database queries.' as description_md,
     'sqlpage_illustration_components.webp' as image;
 
 SELECT 'hero' as component,
-    '🪄 We did the hard part' as title,
+    '🪄 Automatic' as title,
     'SQLPage handles HTTP requests, database connections, streaming rendering, styling, [security](safety.sql), and [performance](performance.sql) for you.
 
 Focus only on your data, and how you want to present it. We''ve tamed the tech, you tame the data.' as description_md,

sqlpage/templates/shell.handlebars

@@ -166,8 +166,8 @@
                 <button class="navbar-toggler collapsed" type="button" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
-                <h1 class="navbar-brand navbar-brand-autodark d-inline ps-2 text-truncate">
-                    <a style="text-decoration: none" href="{{#if link}}{{link}}{{else}}/{{/if}}">
+                <span class="navbar-brand navbar-brand-autodark d-inline ps-2 text-truncate">
+                    <a class="text-decoration-none text-body" href="{{#if link}}{{link}}{{else}}/{{/if}}">
                         {{#if image}}
                             <img src="{{image}}" alt="{{title}}" height="32" class="navbar-brand-image">
                         {{/if}}
@@ -176,7 +176,7 @@
                         {{/if}}
                         <span class="pe-2 pe-lg-0 align-middle">{{title}}</span>
                     </a>
-                </h1>
+                </span>
                 <div class="navbar-collapse collapse" id="sidebar-menu">
                     {{> menu-items menu_item=menu_item}}
                 </div>
@@ -193,9 +193,9 @@
                         {{~icon_img icon~}}
                     {{/if}}
                 </a>
-                <h1 class="mb-0 fs-2 text-truncate flex-grow-1" style="flex-basis:0">
-                    <a class="text-decoration-none" href="{{#if link}}{{link}}{{else}}/{{/if}}">{{default navbar_title title}}</a>
-                </h1>
+                <span class="mb-0 fs-2 text-truncate flex-grow-1" style="flex-basis:0">
+                    <a class="text-decoration-none text-body" href="{{#if link}}{{link}}{{else}}/{{/if}}">{{default navbar_title title}}</a>
+                </span>
                 {{#if (or menu_item search_target)}}
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>