Improve SEO

Author: mekanix

README.md

@@ -31,3 +31,13 @@ Instead, publishing is handled by GitHub Actions in [`.github/workflows/pages.ym
 ## One-time GitHub configuration
 
 In the GitHub repository settings, set Pages to use `GitHub Actions` as the source.
+
+## SEO improvements
+
+The site now includes:
+
+1. stable canonical URLs derived from `site_url`,
+2. a global meta description with page-level overrides,
+3. Open Graph and Twitter card metadata,
+4. structured data for the site,
+5. a `robots.txt` file for crawling guidance.

docs/index.md

@@ -1,28 +1,19 @@
-# Intro
+---
+title: Freenit framework for Svelte and FastAPI development
+description: Freenit is a web development framework that combines a visual designer, Svelte frontend tooling, FastAPI backend tooling, and reusable snippets to speed up product delivery.
+---
 
-Freenit is framework made to automate all your WEB dev work. It is made of tree
-parts:
+# Freenit framework for Svelte and FastAPI development
 
-* Designer to speed up design and UI work
-* Frontend library based on Svelte
-* Backend library based on FastAPI
+Freenit is a framework for automating modern web application development. It combines three parts:
 
-The idea is to automate and integrate as much as possible and let you be just
-creative and concentrate on important stuff. Usual workflow is to use designer
-as drag and drop tool for UI and export it as code. While working on it, saving
-your work in `.json` format enables you to save it in git and easily "rewind"
-to the UI design at a certain point. When code is exported from such `.json`
-file, it is pixel-perfect UI, but still not perfect code. Running
-`npm run format` will help. You will still need to adjust the code to add
-integration with backend, but it is in the best shape generic code can be. Once
-you reshape the code to your liking, `data` variable in such code can serve as
-format of messages frontend expect from backend. The backend work is usually in
-two parts: DB models and API endpoints. In all of this code snippets will help
-you if you use VSCode or LunarVim (list of supported editors will expand over
-time).
+* A visual designer to speed up UI and design work
+* Frontend tooling based on Svelte
+* Backend tooling based on FastAPI
 
-All of this is just words. Dive into tutorial to see what Freenit is really
-about.
+The goal is to automate the repetitive parts of product development so you can focus on implementation details that matter. A common workflow is to build UI in the designer, save it as `.json`, version that file in git, and export the result as Svelte code. The exported code is intended to be pixel-accurate and easy to reshape for your application. After that, you can connect it to backend data models and API endpoints, with reusable snippets helping on both sides of the stack.
+
+This documentation explains the designer, frontend, backend, and snippet workflow in one place.
 
 
 ## Bootstrap the Project

docs/overrides/main.html

@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+  {{ super() }}
+  {% set meta_description = config.site_description %}
+  {% if page and page.meta and page.meta.description %}
+    {% set meta_description = page.meta.description %}
+  {% endif %}
+  {% set page_title = config.site_name %}
+  {% if page and page.title %}
+    {% set page_title = page.title ~ " - " ~ config.site_name %}
+  {% endif %}
+  {% set canonical_url = page.canonical_url if page and page.canonical_url else config.site_url %}
+  <meta name="description" content="{{ meta_description | e }}">
+  <meta name="author" content="{{ config.site_author | e }}">
+  <meta name="robots" content="index, follow">
+  <link rel="canonical" href="{{ canonical_url | e }}">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="{{ page_title | e }}">
+  <meta property="og:description" content="{{ meta_description | e }}">
+  <meta property="og:url" content="{{ canonical_url | e }}">
+  <meta property="og:site_name" content="{{ config.site_name | e }}">
+  <meta property="og:image" content="{{ (config.site_url ~ 'img/logo.png') | e }}">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="{{ page_title | e }}">
+  <meta name="twitter:description" content="{{ meta_description | e }}">
+  <meta name="theme-color" content="#1f6feb">
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": {{ config.site_name | tojson }},
+      "url": {{ config.site_url | tojson }},
+      "description": {{ meta_description | tojson }},
+      "publisher": {
+        "@type": "Organization",
+        "name": {{ config.site_author | tojson }}
+      }
+    }
+  </script>
+{% endblock %}

docs/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://freenit-framework.github.io/sitemap.xml

mkdocs.yml

@@ -1,9 +1,13 @@
 site_name: Freenit
 site_url: https://freenit-framework.github.io/
+site_description: Freenit is a framework for designing, building, and documenting modern web applications with a visual designer, Svelte frontend tooling, and FastAPI backend tooling.
+site_author: Freenit Framework
 repo_url: https://github.com/freenit-framework/freenit-framework.github.io
 repo_name: freenit-framework/freenit-framework.github.io
 theme:
   name: material
+  language: en
+  custom_dir: docs/overrides
   logo: img/logo.png
   favicon: img/logo.png
 markdown_extensions:
@@ -15,3 +19,7 @@ markdown_extensions:
 plugins:
   - search
   - awesome-pages
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/freenit-framework