studio-variable/index-shop
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Improve Open Graph meta tags with default description
All checks were successful
Deploy / Deploy to Production (push) Successful in 7s
Details

Browse source 
Add default descriptions for social sharing cards:
- FR: "Boutique de Index, ONG d'investigation indépendante"
- EN: "Index shop, independent investigative NGO"

Changes:
- Add language-specific default descriptions
- Fix description excerpt handling
- Add OG image generation helper (create-og-image.html)
- Use favicon as temporary OG image (TODO: create proper 1200x630 image)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-01-16 17:08:24 +01:00
parent 9eb8d08bcc
commit f3f302513e
2 changed files with 92 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

73
create-og-image.html Normal file
View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Generate OG Image</title>
<style>
#canvas-container {
display: none;
}
canvas {
border: 1px solid #ccc;
}
#preview {
margin-top: 20px;
}
#preview img {
max-width: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Générer l'image Open Graph</h1>
<p>Cette page génère une image 1200x630px avec le logo Index pour les partages sociaux.</p>
<button onclick="generateImage()">Générer l'image</button>
<div id="canvas-container">
<canvas id="canvas" width="1200" height="630"></canvas>
</div>
<div id="preview"></div>
<script>
function generateImage() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Fond blanc
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 1200, 630);
// Charger et dessiner le logo SVG
const img = new Image();
img.onload = function() {
// Centrer le logo
const logoWidth = 400;
const logoHeight = (this.height / this.width) * logoWidth;
const x = (1200 - logoWidth) / 2;
const y = (630 - logoHeight) / 2 - 50;
ctx.drawImage(img, x, y, logoWidth, logoHeight);
// Ajouter le texte en dessous
ctx.fillStyle = '#000000';
ctx.font = '24px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('Boutique de Index, ONG d\'investigation indépendante', 600, 500);
// Convertir en PNG et afficher
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const preview = document.getElementById('preview');
preview.innerHTML = `
<h2>Aperçu</h2>
<img src="${url}" alt="OG Image Preview">
<p><a href="${url}" download="og-logo.png">Télécharger og-logo.png</a></p>
<p>Placez ce fichier dans <code>/assets/og-logo.png</code></p>
`;
});
};
img.src = 'assets/index-logo.svg';
}
</script>
</body>
</html>

24
site/snippets/seo.php
View file

@ -3,16 +3,30 @@
* SEO meta tags * SEO meta tags
*/ */
// Language
$lang = $kirby->language()->code();
// Basic meta // Basic meta
$title = $page->customTitle()->or($page->title())->value(); $title = $page->customTitle()->or($page->title())->value();
$siteName = 'Index.ngo'; $siteName = 'Index.ngo';
$fullTitle = $title . ' | ' . $siteName; $fullTitle = $title . ' | ' . $siteName;
$description = $page->metaDescription()->or($page->description())->excerpt(160);
$url = $page->url();
$image = $page->image() ? $page->image()->url() : url('assets/og-image.jpg');
// Language // Default descriptions by language
$lang = $kirby->language()->code(); $defaultDescriptionFr = 'Boutique de Index, ONG d\'investigation indépendante';
$defaultDescriptionEn = 'Index shop, independent investigative NGO';
$defaultDescription = $lang == 'en' ? $defaultDescriptionEn : $defaultDescriptionFr;
$description = $page->metaDescription()->or($page->description())->value();
if ($description) {
$description = excerpt($description, 160);
} else {
$description = $defaultDescription;
}
$url = $page->url();
// Use product image if available, otherwise use default OG image
// TODO: Create assets/og-logo.png (1200x630px) with Index logo + description
$image = $page->image() ? $page->image()->url() : url('assets/favicon.png');
?> ?>
<!-- Basic Meta Tags --> <!-- Basic Meta Tags -->