feat(SEO): add Json-LD meta and tags

content/actualites/journee-du-velo-2024/index.md

@@ -5,6 +5,9 @@ featured_image:
     src: stand_discussions.jpg
     caption: Sebastien Denise et Alexis Martini discutent de l'état des aménagements cyclables avec deux visiteurs sur notre stand.
     alt: Quatre personnes discutant devant un stand.
+tags:
+    - manifestation
+    - Aubevoye
 ---
 Ce samedi 20 avril 2024, l'association VMEMS a participé à la journée du vélo organisé par la mairie du Val d'Hazey. Première édition de ce type évènement jamais réalisé auparavant à Gaillon-Aubevoye, elle a regroupé plusieurs acteurs locaux de la mobilité et des loisirs à vélo.
 <!--more-->

hugo.toml

@@ -9,15 +9,16 @@ enableGitInfo = true
 
 [params]
 dateFmt = "2006-01-02 15:04"
-    [params.contact]
-    email = "contact@vmems.fr"
-    website = "https://vmems.fr"
-    # helloasso = ""
-    # helloasso_adhesion = ""
-    # paper_adhesion = "https://static.vmems.fr/"
-    # [params.socials]
-    # facebook = "https://www.facebook.com/groups/bethleemaubevoye"
-    # youtube = "https://www.youtube.com/@letoiledebethleem9895"
+ISO8601 = "2006-01-02T15:04:05-07:00"
+[params.contact]
+email = "contact@vmems.fr"
+website = "https://vmems.fr"
+# helloasso = ""
+# helloasso_adhesion = ""
+# paper_adhesion = "https://static.vmems.fr/"
+# [params.socials]
+# facebook = "https://www.facebook.com/groups/bethleemaubevoye"
+# youtube = "https://www.youtube.com/@letoiledebethleem9895"
 
 
 

layouts/_default/single.html

@@ -11,6 +11,14 @@
                     <span>Mis à jour le <b><time>{{ . | time.Format ":date_full" }}</time></b></span>
                 {{ end }}
             </p>
+        <p class="article__tags">
+            {{- range $index, $element := .Params.tags -}}
+                {{- with $element -}}
+                    <span>{{- if $index -}}, {{- end -}}</span>
+                    <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
+                {{- end -}}
+            {{ end }}
+        </p>
     
 
         {{ if .Params.featured_image }}
@@ -26,12 +34,11 @@
         {{ end }}
         {{ end }}
 
-            {{ range .Params.tags }}
-               <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
-            {{ end }}
-			<div>
-				{{ .Content }}
-			</div>
+
+        <div class="article__text">
+            {{ .Content }}
+        </div>
+        
 		</article>
 	</main>
 {{ end }}

layouts/index.html

@@ -11,8 +11,12 @@
                     />
                 </div>
                 <div class="landing__slogan__content col-12 col-lg-9 mt-4 mt-md-0 d-flex flex-column justify-content-center align-items-center">
-                    <h1 class="text-center">Ensemble, rendons Gaillon-Aubevoye cyclable !</h1>
-                    <h5 class="text-center mt-3">Association Vélo et Mobilités en Eure-Madrie-Seine</h5>
+                    <h1 class="text-center">
+                        Ensemble, rendons Gaillon-Aubevoye cyclable !
+                    </h1>
+                    <h5 class="text-center mt-3">
+                        Association Vélo et Mobilités en Eure-Madrie-Seine
+                    </h5>
                 </div>
             </div>
             </div>
@@ -58,57 +62,53 @@
             What we do
             */}}
             <div class="container">
-            <div class="offset-lg-6 col-md-6">
-            <h2>Nos actions citoyennes 🎬</h2>
-            <ul>
-                <li>Montrer et promouvoir la solution vélo auprès du grand public<ul>
-                        <li>Organisation d'évènements publics, sensibilisation</li>
+                <div class="offset-lg-6 col-md-6">
+                    <h2>Nos actions citoyennes 🎬</h2>
+                    <ul>
+                        <li>Montrer et promouvoir la solution vélo auprès du grand public<ul>
+                                <li>Organisation d'évènements publics, sensibilisation</li>
+                            </ul>
+                        </li>
+                        <li>Faire interface entre les élus et les usagers<ul>
+                                <li>Montrer aux élus le besoin en infrastructure et les avantages du vélos</li>
+                                <li>Être force de propositions, signaler les problèmes et faire des critiques constructives des aménagements cyclables et projets des collectivités</li>
+                            </ul>
+                        </li>
+                        <li>Porter le besoin des cyclistes auprès d'entreprises privées<ul>
+                                <li>Par exemple, plaidoyer à la mise en place de stationnements dans enceinte privées (centre commerciaux, locaux d'entreprises…)</li>
+                            </ul>
+                        </li>
+                        <li>Aider les cyclistes, plus particulièrement les novices</li>
                     </ul>
-                </li>
-                <li>Faire interface entre les élus et les usagers<ul>
-                        <li>Montrer aux élus le besoin en infrastructure et les avantages du vélos</li>
-                        <li>Être force de propositions, signaler les problèmes et faire des critiques constructives des aménagements cyclables et projets des collectivités</li>
-                    </ul>
-                </li>
-                <li>Porter le besoin des cyclistes auprès d'entreprises privées<ul>
-                        <li>Par exemple, plaidoyer à la mise en place de stationnements dans enceinte privées (centre commerciaux, locaux d'entreprises…)</li>
-                    </ul>
-                </li>
-                <li>Aider les cyclistes, plus particulièrement les novices</li>
-            </ul>
-            <div class="text-end mt-4">
-                <a href="/projets" class="btn btn-lg btn-success">
-                    Les sujets et projets en cours
-                </a>
-            </div>
-            </div>
+                    <div class="text-end mt-4">
+                        <a href="/projets" class="btn btn-lg btn-success">
+                            Les sujets et projets en cours
+                        </a>
+                    </div>
+                </div>
             </div>
         </section>
         <section class="landing__section odd" id="landing-need-help">
             <div class="container">
-            {{/*
-            How to help us
-            */}}
-            <h2>Nous avons besoin de votre aide ! 🙋</h2>
-            <ul>
-                <li>Pour parler de l'association et des initiatives autour de vous…</li>
-                <li>Pour envoyer des e-mails et lettres de demandes…</li>
-                <li>Pour participer aux réflexions autours des aménagements…</li>
-                <li>Pour communiquer, au public, aux médias…</li>
-                <li>Pour organiser des évènements…</li>
-            </ul>
-            <div class="mt-4">
-                <a href="/association/rejoindre" class="btn btn-lg btn-success">
-                    Nous rejoindre
-                </a>
-            </div>
+                {{/* How to help us */}}
+                <h2>Nous avons besoin de votre aide ! 🙋</h2>
+                <ul>
+                    <li>Pour parler de l'association et des initiatives autour de vous…</li>
+                    <li>Pour envoyer des e-mails et lettres de demandes…</li>
+                    <li>Pour participer aux réflexions autours des aménagements…</li>
+                    <li>Pour communiquer, au public, aux médias…</li>
+                    <li>Pour organiser des évènements…</li>
+                </ul>
+                <div class="mt-4">
+                    <a href="/association/rejoindre" class="btn btn-lg btn-success">
+                        Nous rejoindre
+                    </a>
+                </div>
             </div>
         </section>
         <section class="landing__section" id="landing-last-news">
             <div class="container">
-            {{/*
-            Show last 3 news
-            */}}
+            {{/* Show last 3 news */}}
             <h2>Nos dernières actualités</h2>
             {{ $news := where .Site.RegularPages "Section" "in" "actualites" }}
             {{ range $index, $element := $news }}{{ if eq $index 0 }}

layouts/partials/head.html

@@ -1,6 +1,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
+{{- $title := partialCached "data/title" . .RelPermalink -}}
+<title>{{ $title }} {{ if not .IsHome }}- VMEMS{{ end }}</title>
+
 {{- $description := partialCached "data/description" . .RelPermalink -}}
 <meta name="description" content="{{ $description }}">
 
@@ -8,15 +11,18 @@
 <meta name="author" content="{{ . }}">
 {{ end }}
 
-{{- $title := partialCached "data/title" . .RelPermalink -}}
-
-<title>{{ $title }} {{ if not .IsHome }}- VMEMS{{ end }}</title>
+{{ if .IsPage }}
+{{- with .Params.tags -}}
+<meta name="keywords" content="{{ range $i, $e := . }}{{ if $i }}, {{ end }}{{ $e }}{{ end }}">
+{{ end }}
+{{- end -}}
 
 <link rel="canonical" href="{{ .Permalink }}">
 
-{{ partial "opengraph/include.html" . }}
+{{- partial "metas/opengraph.html" . -}}
+{{- partial "metas/json-ld.html" . -}}
 
-{{ range .AlternativeOutputFormats }}
+{{- range .AlternativeOutputFormats -}}
 <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
 {{ end }}
 
@@ -29,7 +35,7 @@
 <meta name="theme-color" content="#198754">
 
 <!-- Note: j'ai galérer à rajouter du scss car en fait y'avait déja une variable $style de définit plus haut... -->
-{{ $style := resources.Get "sass/main.scss" | resources.ToCSS  | resources.Fingerprint }}
+{{- $style := resources.Get "sass/main.scss" | resources.ToCSS  | resources.Fingerprint -}}
 <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
 
 <meta name="htmx-config" content='{"selfRequestsOnly":false}'>

layouts/partials/metas/json-ld.html

@@ -0,0 +1,23 @@
+{{ if .IsPage }}
+{{ if eq .Section "actualites" }}
+<script type="application/ld+json">
+{
+    "@context" : "http://schema.org",
+    "@type" : "BlogPosting",
+    "articleSection" : "{{ .Section | title }}",
+    "name" : "{{ .Title }}",
+    "headline" : "{{ .Title }}",
+    "description" : "{{ if .Description }}{{ .Description }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}",
+    "inLanguage" : "fr-FR",
+    "author" : "{{ .Params.author }}",
+    "creator" : "VMEMS",
+    "accountablePerson" : "VMEMS",
+    "datePublished": "{{ .PublishDate.Format $.Site.Params.ISO8601 }}",
+    "dateModified" : "{{ .Lastmod.Format $.Site.Params.ISO8601 }}",
+    "url" : "{{ .Permalink }}",
+    "wordCount" : "{{ .WordCount }}",
+    "keywords" : [ {{ range $i, $e := .Params.tags }}{{ if $i }}, {{ end }}{{ $e }}{{ end }} ]
+}
+</script>
+{{ end }}
+{{ end }}