minor #1228 [Site] Improve SEO meta (smnandre)

This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Improve SEO meta Add meta description & canonical on every page Let's please Google / Pagespeed... ... to 100% and beyond 🚀 Commits ------- 36efce5 [Site] Improve SEO meta
symfony · Nov 6, 2023 · 5dce994 · 5dce994
2 parents d43627a + 36efce5
commit 5dce994
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 14 deletions.
diff --git a/ux.symfony.com/templates/base.html.twig b/ux.symfony.com/templates/base.html.twig
@@ -2,19 +2,23 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <title>{% block title %}Symfony UX: JavaScript tools you'll love{% endblock %}</title>
-        <link rel="icon" href="/favicon.ico" sizes="48x48">
-        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-        <link rel="manifest" href="/site.webmanifest" />
-        <link rel="mask-icon" href="https://symfony.com/favicons/safari-pinned-tab.svg" color="#5bbad5">
+        <title>{% block title %}{{ meta.title|default }}{{ meta.title_suffix|default(' - Symfony UX') }}{% endblock %}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="color-scheme" content="light dark">
-        <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+        <link rel="preconnect" href="https://cdn.jsdelivr.net">
         {% block stylesheets %}
             {{ ux_controller_link_tags() }}
             <link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
         {% endblock %}
+        {% if meta.canonical|default %}
+            <link rel="canonical" href="{{ meta.canonical }}">
+        {% endif %}
+        <link rel="icon" href="/favicon.ico" sizes="48x48">
+        <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+        <link rel="manifest" href="/site.webmanifest">
+        <link rel="mask-icon" href="https://symfony.com/favicons/safari-pinned-tab.svg" color="#5bbad5">
+        <meta name="description" content="{% block description %}{{ meta.description|default }}{% endblock %}">
         {% block javascripts %}
             <script>
                 (() => {

diff --git a/ux.symfony.com/templates/liveDemoBase.html.twig b/ux.symfony.com/templates/liveDemoBase.html.twig
@@ -1,6 +1,11 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}{{ demo.name }} Demo | Live Components{% endblock %}
+{% set meta = {
+    title: demo.name,
+    title_suffix: " - Symfony UX Demo",
+    description: demo.description,
+    canonical: url(demo.route),
+} %}
 
 {% block header %}
     <header style="">
@@ -21,7 +26,8 @@
     <div class="container-fluid container-xxl px-4 px-md-5 mb-5">
         <div class="text-center mt-md-0">
             <p class="eyebrows">
-                <a href="{{ url('app_demos') }}">DEMO</a>
+                <a href="{{ url('app_demos') }}">DEMO</a> /
+                <a href="{{ url('app_demos') }}">LiveComponent</a>
             </p>
             <h1 class="ubuntu text-center">{{ demo.name }}</h1>
             <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 demo-introduction">

diff --git a/ux.symfony.com/templates/main/demos.html.twig b/ux.symfony.com/templates/main/demos.html.twig
@@ -1,6 +1,10 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}All Symfony UX Demos{% endblock %}
+{% set meta = {
+    title: "Interactive Demos",
+    description: "Discover all that Symfony UX offers through our collection of demos, each provided with commented source code (PHP & JS)",
+    canonical: url('app_demos'),
+} %}
 
 {% block content %}
 

diff --git a/ux.symfony.com/templates/main/homepage.html.twig b/ux.symfony.com/templates/main/homepage.html.twig
@@ -1,5 +1,12 @@
 {% extends 'base.html.twig' %}
 
+{% set meta = {
+    title: "Symfony UX: JavaScript tools you'll love",
+    title_suffix: false,
+    description: "A set of PHP & JavaScript packages, curated by Symfony, to solve your every day frontend problems. Featuring Stimulus and Turbo.",
+    canonical: url('app_homepage'),
+} %}
+
 {% block content %}
 <div class="hero hero-background">
     <div class="container-fluid container-xxl px-4 py-4 px-md-5 py-md-5">

diff --git a/ux.symfony.com/templates/main/packages.html.twig b/ux.symfony.com/templates/main/packages.html.twig
@@ -1,6 +1,10 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}All Symfony UX Packages{% endblock %}
+{% set meta = {
+    title: "All Packages",
+    description: "Symfony UX: a treasure chest of packages to solve your frontend problems",
+    canonical: url('app_packages'),
+} %}
 
 {% block content %}
 <div class="hero">

diff --git a/ux.symfony.com/templates/packageBase.html.twig b/ux.symfony.com/templates/packageBase.html.twig
@@ -1,7 +1,10 @@
 {% extends 'base.html.twig' %}
 
-{# {% set package = twigPackageHelper.currentPackage() %} #}
-{% block title %}{{ package.humanName }} | Symfony UX Packages{% endblock %}
+{% set meta = {
+    title: package.humanName,
+    description: package.description,
+    canonical: url(package.route),
+} %}
 
 {% block header %}
     {{ include('_header.html.twig', {

diff --git a/ux.symfony.com/tests/Functional/UxPackagesTest.php b/ux.symfony.com/tests/Functional/UxPackagesTest.php
@@ -25,7 +25,7 @@ public function testAllPackagesPage(): void
         $this->browser()
             ->visit('/packages')
             ->assertSuccessful()
-            ->assertSeeIn('title', 'Symfony UX Packages')
+            ->assertSeeIn('title', 'Packages')
             ->assertSee('All Packages')
         ;
     }