feat(Meta): add meta tags and open-graph properties to blog articles

Makefile

@@ -7,7 +7,7 @@ COMPOSER=symfony composer
 CONSOLE=${SYMFONY} console
 export COMPOSE_PROJECT_NAME=sylius_blog_plugin
 PLUGIN_NAME=sylius-blog-plugin
-COMPOSE=docker-compose
+COMPOSE=docker compose
 YARN=yarn
 DOCTRINE_MIGRATIONS_NAMESPACE=MonsieurBiz\SyliusBlogPlugin\Migrations
 

src/Entity/Article.php

@@ -209,6 +209,36 @@ public function getAuthors(): Collection
         return $this->authors;
     }
 
+    public function getMetaTitle(): ?string
+    {
+        return $this->getTranslation()->getMetaTitle();
+    }
+
+    public function setMetaTitle(?string $metaTitle): void
+    {
+        $this->getTranslation()->setMetaTitle($metaTitle);
+    }
+
+    public function getMetaDescription(): ?string
+    {
+        return $this->getTranslation()->getMetaDescription();
+    }
+
+    public function setMetaDescription(?string $metaDescription): void
+    {
+        $this->getTranslation()->setMetaDescription($metaDescription);
+    }
+
+    public function getMetaKeywords(): ?string
+    {
+        return $this->getTranslation()->getMetaKeywords();
+    }
+
+    public function setMetaKeywords(?string $metaKeywords): void
+    {
+        $this->getTranslation()->setMetaKeywords($metaKeywords);
+    }
+
     public function publish(): void
     {
         $this->publishedAt = new DateTime();

src/Entity/ArticleInterface.php

@@ -77,4 +77,16 @@ public function hasAuthor(AuthorInterface $author): bool;
     public function getAuthors(): Collection;
 
     public function publish(): void;
+
+    public function getMetaTitle(): ?string;
+
+    public function setMetaTitle(?string $metaTitle): void;
+
+    public function getMetaDescription(): ?string;
+
+    public function setMetaDescription(?string $metaDescription): void;
+
+    public function getMetaKeywords(): ?string;
+
+    public function setMetaKeywords(?string $metaKeywords): void;
 }

src/Entity/ArticleTranslation.php

@@ -28,6 +28,12 @@ class ArticleTranslation extends AbstractTranslation implements ArticleTranslati
 
     protected ?string $content;
 
+    protected ?string $metaTitle = null;
+
+    protected ?string $metaDescription = null;
+
+    protected ?string $metaKeywords = null;
+
     public function getId(): ?int
     {
         return $this->id;
@@ -72,4 +78,34 @@ public function setContent(?string $content): void
     {
         $this->content = $content;
     }
+
+    public function getMetaTitle(): ?string
+    {
+        return $this->metaTitle;
+    }
+
+    public function setMetaTitle(?string $metaTitle): void
+    {
+        $this->metaTitle = $metaTitle;
+    }
+
+    public function getMetaDescription(): ?string
+    {
+        return $this->metaDescription;
+    }
+
+    public function setMetaDescription(?string $metaDescription): void
+    {
+        $this->metaDescription = $metaDescription;
+    }
+
+    public function getMetaKeywords(): ?string
+    {
+        return $this->metaKeywords;
+    }
+
+    public function setMetaKeywords(?string $metaKeywords): void
+    {
+        $this->metaKeywords = $metaKeywords;
+    }
 }

src/Entity/ArticleTranslationInterface.php

@@ -29,4 +29,16 @@ public function setDescription(?string $description): void;
     public function getContent(): ?string;
 
     public function setContent(string $content): void;
+
+    public function getMetaTitle(): ?string;
+
+    public function setMetaTitle(?string $metaTitle): void;
+
+    public function getMetaDescription(): ?string;
+
+    public function setMetaDescription(?string $metaDescription): void;
+
+    public function getMetaKeywords(): ?string;
+
+    public function setMetaKeywords(?string $metaKeywords): void;
 }

src/Form/Type/ArticleTranslationType.php

@@ -39,6 +39,17 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ->add('content', RichEditorType::class, [
                 'label' => 'monsieurbiz_blog.form.article.content',
             ])
+            ->add('metaTitle', TextType::class, [
+                'label' => 'monsieurbiz_blog.form.article.meta_title',
+                'help' => 'monsieurbiz_blog.form.article.help.meta_title',
+            ])
+            ->add('metaDescription', TextType::class, [
+                'label' => 'monsieurbiz_blog.form.article.meta_description',
+                'help' => 'monsieurbiz_blog.form.article.help.meta_description',
+            ])
+            ->add('metaKeywords', TextType::class, [
+                'label' => 'monsieurbiz_blog.form.article.meta_keywords',
+            ])
         ;
     }
 }

src/Migrations/Version20240820090632.php

@@ -0,0 +1,38 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's Blog plugin for Sylius.
+ * (c) Monsieur Biz <[email protected]>
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusBlogPlugin\Migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20240820090632 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE monsieurbiz_blog_article_translation ADD metaTitle VARCHAR(255) DEFAULT NULL, ADD metaDescription LONGTEXT DEFAULT NULL, ADD metaKeywords VARCHAR(255) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE monsieurbiz_blog_article_translation DROP metaTitle, DROP metaDescription, DROP metaKeywords');
+    }
+}

src/Resources/config/doctrine/ArticleTranslation.orm.xml

@@ -15,6 +15,10 @@
         <field name="description" type="text" />
         <field name="content" type="text"/>
 
+        <field name="metaTitle" nullable="true"/>
+        <field name="metaDescription" type="text" nullable="true"/>
+        <field name="metaKeywords" nullable="true"/>
+
         <field name="createdAt" column="created_at" type="datetime_immutable">
             <gedmo:timestampable on="create"/>
         </field>

src/Resources/config/images.yaml

@@ -6,3 +6,4 @@ liip_imagine:
         monsieurbiz_blog_image_thumbnail:
             filters:
                 thumbnail: { size: [260, 260], mode: outbound }
+        monsieurbiz_blog_image_og_image: ~

src/Resources/translations/messages.en.yaml

@@ -11,6 +11,12 @@ monsieurbiz_blog:
             image: Image
             description: Description
             authors: Authors
+            meta_title: Meta title
+            meta_description: Meta description
+            meta_keywords: Meta keywords
+            help:
+                meta_title: If empty, the title will be used.
+                meta_description: If empty, the description will be used.
         author:
             name: Name
     ui:

src/Resources/translations/messages.fr.yaml

@@ -11,6 +11,12 @@ monsieurbiz_blog:
             image: Image
             description: Description
             authors: Auteurs
+            meta_title: Meta title
+            meta_description: Meta description
+            meta_keywords: Meta keywords
+            help:
+                meta_title: Si vide, le titre sera utilisé.
+                meta_description: Si vide, la description sera utilisée.
         author:
             name: Nom
     ui:

src/Resources/views/Shop/Article/Metatags/_image.html.twig

@@ -0,0 +1,3 @@
+{% if article.image is not empty %}
+    <meta property="og:image" content="{{ article.image|imagine_filter('monsieurbiz_blog_image_og_image') }}" />
+{% endif %}

src/Resources/views/Shop/Article/_metadata.html.twig

@@ -0,0 +1,13 @@
+{% set metaTitle = article.metaTitle|default(article.title) %}
+{% set metaDescription = article.metaDescription|default(article.title) %}
+
+<meta name="title" property="og:title" content="{{ metaTitle }}" />
+<meta name="description" property="og:description" content="{{ metaDescription }}" />
+<meta property="og:type" content="article" />
+<meta property="og:url" content="{{ absolute_url(path('monsieurbiz_blog_article_show', {'slug': article.slug})) }}" />
+
+{% include '@MonsieurBizSyliusBlogPlugin/Shop/Article/Metatags/_image.html.twig' %}
+
+{% if article.metaKeywords|default('') is not empty %}
+    <meta name="keywords" content="{{ article.metaKeywords }}"/>
+{% endif %}

src/Resources/views/Shop/Article/show.html.twig

@@ -5,6 +5,7 @@
 {% endblock %}
 
 {% block metatags %}
+    {% include '@MonsieurBizSyliusBlogPlugin/Shop/Article/_metadata.html.twig' %}
     {% include '@MonsieurBizSyliusBlogPlugin/Shop/Article/_structured_data.html.twig' %}
 {% endblock %}