Le référencement est une des préocupations principales de nos clients, tous
veulent savoir si avec le produit qu'on leur propose ils seront en mesure d'être
les premiers dans les résultats Google.
Bien qu'il n'existe pas de recette miracle pour parvenir à ce résultat,
certaines sociétés sont spécialisés dans ce business et déploient des trésors
d'ingéniosité pour réussir à faire grimper les pages de leurs clients dans les
index des moteurs.
Mais c'est un boulot à part entière, et ce n'est pas le nôtre. Nous faisons des
sites web, à chacun sa spécialité.
Malgré tout, il existe plusieurs bonnes pratiques qui permettent d'obtenir de
bons résultats sans trop d'efforts, et Caracole s'en sort pas trop mal de ce
coté là.
Tout d'abord il tire parti de la façon dont les urls sont gérées par cakePHP, et
donc aucune url ne contient de paramètre de la forme ?foo=bar&action=foobar qui
sont très mal indexées. Chaque page possède donc sa propre url unique. Les
méthodes d'url rewriting proposées de base par cakePHP sont très puissantes et
font déjà une très grosse partie du travail.
Dans la même veine, il est possible de définir des 'slugs' pour chaque élément,
un slug permet de donner un identifiant à chacune des pages, ce qui signifie
qu'au lieu de retrouver un élément par son id dans l'url (un simple nombre, qui
ne donne pas d'indication sur le contenu), on peut à la place le remplacer par
un slug (du genre 'services', 'nous-contacter', etc). Cela donne des urls du
genre /services.html, /posts/1:mon-premier-post, etc
Cela facilite le référencement des pages car des mots clés se rapportant au
contenu de la page peuvent déjà être mis dans l'url, qui est une place
privilégiée.
Ici encore, il suffit d'ajouter un champ 'slug' dans la table correspondante au
modèle pour que celui-ci soit automatiquement généré à partir du nom (il est
bien sur possible de le modifier si besoin).
Caracole est aussi doté d'un système de génération automatique de sitemap (le
plan du site). Celui-ci est généré en deux versions, une version html pour vos
visiteurs, et une version XML (qui indique les fréquences de réactualisations
ainsi que les dates de dernière modification) pour les moteurs.
Et pour finir, je vais passer rapidement sur les essentiels : balise
et
meta description différents pour chaque page, fichier robots.txt, texte
alternatif sur les images et accessibilité du markup HTML mais bien sur,
Caracole se charge de tout cela aussi.</p>
</div>
<div class="mt-[38px] flex flex-wrap gap-2">
<a href="/tags/cakephp/" class="border border-tag-line bg-tag-bg px-2 py-[5px] font-mono text-[11px] text-tag hover:border-tag hover:text-tag">#cakephp</a>
<a href="/tags/caracole/" class="border border-tag-line bg-tag-bg px-2 py-[5px] font-mono text-[11px] text-tag hover:border-tag hover:text-tag">#caracole</a>
</div>
</article>
<script>
// Type the title letter by letter; the full title stays in the HTML for no-JS and crawlers
(() => {
const title = document.getElementById("article-title");
const label = title.querySelector("[data-text]");
const caret = title.querySelector("[data-caret]");
const text = label.textContent.trim();
const typed = document.createElement("span");
const untyped = document.createElement("span");
untyped.className = "invisible";
untyped.textContent = text;
label.replaceChildren(typed, caret, untyped);
let index = 0;
const type = () => {
index += 1;
typed.textContent = text.slice(0, index);
untyped.textContent = text.slice(index);
if (index < text.length) {
setTimeout(type, 20 + Math.random() * 30);
return;
}
caret.remove();
label.textContent = text;
};
setTimeout(type, 300);
})();
</script>
<footer class="mx-auto flex max-w-[800px] flex-col justify-between gap-3 border-t border-line pb-8 pt-[22px] font-mono text-[11px] text-muted sm:flex-row">
<div class="flex flex-col gap-1">
<span>Personal blog of Tim Carry. Posting mostly on tech-related stuff.</span>
<span>EOF — thanks for reading.</span>
</div>
<div class="flex gap-[18px]">
<a href="https://github.com/pixelastic" class="hover:text-accent">↗ source on GitHub</a>
<a href="/atom.xml" class="hover:text-accent">RSS</a>
</div>
</footer>
</div>
<script>
// Open article images full screen in a native dialog, closed by a click or Escape
(() => {
const images = document.querySelectorAll(".prose img");
if (!images.length) return;
const dialog = document.createElement("dialog");
dialog.className = "m-auto max-h-[96vh] max-w-[96vw] cursor-zoom-out bg-transparent p-0 backdrop:bg-paper/90";
const full = document.createElement("img");
full.className = "max-h-[96vh] max-w-[96vw] rounded-lg border border-image/70";
dialog.append(full);
document.body.append(dialog);
dialog.addEventListener("click", () => dialog.close());
const open = (image) => {
full.src = image.currentSrc || image.src;
full.alt = image.alt;
dialog.showModal();
};
for (const image of images) {
image.tabIndex = 0;
image.addEventListener("click", () => open(image));
image.addEventListener("keydown", (event) => {
if (event.key === "Enter") open(image);
});
}
})();
</script>
</body>
</html>