Página Sonata 5: Agregando etiquetas Open Graph con SonataPage y SonataMediaSonata

Si ya has utilizado SonataPage y SonataMedia, sabes lo poderosos que son para gestionar contenido y medios en tu sitio. En este artículo, voy a mostrarte cómo extender estas herramientas para añadir fácilmente etiquetas Open Graph a tus páginas para mejorar su compartición en redes sociales.

¿Por qué las etiquetas Open Graph?

Las etiquetas Open Graph (OG) son meta-etiquetas que puedes agregar a tus páginas para definir títulos, descripciones, imágenes y otra información que se utilizará cuando la página se comparta en plataformas como Facebook. Con estas etiquetas, tienes control preciso sobre cómo se presenta tu contenido.

Integración con Sonata

Con nuestra extensión OGAdminExtension, añadiremos tres nuevos campos a la interfaz de administración de SonataPage: ogTitle, ogDescription y ogImage.

1. Modificando la entidad

Primero, modifiquemos la entidad SonataPagePage para incluir tres nuevos campos: ogTitle, ogDescription y ogImage.

<?php
namespace App\Entity;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;
use Sonata\PageBundle\Entity\BasePage;

#[ORM\Entity]
#[ORM\Table(name: 'page__page')]
class SonataPagePage extends BasePage
{
    #[ORM\Id]
    #[ORM\Column(type: Types::INTEGER)]
    #[ORM\GeneratedValue]
    protected $id;


    #[ORM\Column(type: 'string', length: 255, nullable: true)]
    private string $ogTitle;

    #[ORM\Column(type: 'text', nullable: true)]
    private string $ogDescription;


    #[ORM\ManyToOne(targetEntity: "SonataMediaMedia")]
    #[ORM\JoinColumn(name: "media__media_id", referencedColumnName: "id", nullable: true)]
    private ?SonataMediaMedia $ogImage = null;

    public function getOgTitle(): string
    {
        return $this->ogTitle;
    }

    public function setOgTitle(string $ogTitle): self
    {
        $this->ogTitle = $ogTitle;
        return $this;
    }

    public function getOgDescription(): string
    {
        return $this->ogDescription;
    }

    public function setOgDescription(string $ogDescription): self
    {
        $this->ogDescription = $ogDescription;
        return $this;
    }

    public function getOgImage(): ?SonataMediaMedia
    {
        return $this->ogImage;
    }

    public function setOgImage(?SonataMediaMedia $ogImage): self
    {
        $this->ogImage = $ogImage;

        return $this;
    }
}

Aquí, hemos agregado tres propiedades y sus respectivos getters y setters.

2. Creación de la extensión

A continuación, crearemos una extensión para personalizar el formulario de administración de la página:

<?php
namespace App\Admin\Extension;

use Sonata\AdminBundle\Admin\AbstractAdminExtension;
use Sonata\AdminBundle\Form\FormMapper;
use Sonata\AdminBundle\Form\Type\ModelListType;
use Sonata\MediaBundle\Provider\ImageProvider;
use Sonata\MediaBundle\Entity\MediaManager;

class OGAdminExtension extends AbstractAdminExtension
{
    private $mediaManager;
    private $providerImage;

    public function __construct(MediaManager $mediaManager, ImageProvider $providerImage)
    {
        $this->mediaManager = $mediaManager;
        $this->providerImage = $providerImage;
    }

    public function configureFormFields(FormMapper $form): void
    {

        $admin = $form->getAdmin();
        if ($admin->hasSubject() && null !== $admin->getSubject()->getOgImage()) {
            $media = $this->mediaManager->findOneBy([
                'id' => $admin->getSubject()->getOgImage()->getId()
            ]);
            $mediaUrl = $this->providerImage->generatePublicUrl($media, 'default_small');
        } else {
            $mediaUrl = null;
        }

        $imageHtml = $mediaUrl ? '<img src="' . $mediaUrl . '" alt="' . $media->getName() . '" class="img-thumbnail" />' : 'Aucune image sélectionnée';



        $form
            ->with('seo')
            ->add('ogTitle', null, [
                'label' => 'og:title',
            ])
            ->add('ogDescription', null, [
                'label' => 'og:description',
            ])
            /*->add('ogImage', null, [
                'label' => 'og:image',
            ])*/
            ->add('ogImage', ModelListType::class, [
                'label'=>"og:image",
                'required' => false,
                'btn_add'=>true,
                'btn_edit'=>true,
                'btn_list'=>false,
                'btn_delete'=>false,
                'class'=>"App\Entity\SonataMediaMedia",
                'help' => $imageHtml,
                'help_html'=>true

            ],
                ['link_parameters' =>[
                    'context' => 'default',
                    'provider' => 'sonata.media.provider.image'
                ]]
            )
            ->end();
    }
}

Aquí, la extensión personalizará el formulario de administración para agregar los campos requeridos.

Selection_017

3. Configuración de servicios

Después de crear la extensión, es necesario declararla como un servicio en el archivo de configuración de servicios:

    App\Admin\Extension\OGAdminExtension:
        arguments:
            $mediaManager: '@sonata.media.manager.media'
            $providerImage: '@sonata.media.provider.image'
        tags:
            - { name: 'sonata.admin.extension', target: 'sonata.page.admin.page' }

4. Actualizando la plantilla

En tu plantilla Twig, añade etiquetas Open Graph usando las propiedades que has agregado a tu entidad:

<meta property="og:title" content="{{ page.ogTitle }}" />
<meta property="og:description" content="{{ page.ogDescription }}" />
<meta property="og:image" content="{{ sonata_path(page.ogImage, 'reference') }}" />

Con estos pasos, has integrado con éxito etiquetas Open Graph a tu entidad Page de Sonata, mejorando así la optimización en motores de búsqueda de tu sitio web en plataformas sociales como Facebook, Twitter y LinkedIn.

image