as-milano/wn-seo-plugin

SEO plugin with sitemap generation support.

dev-master 2022-10-23 23:45 UTC

Requires

• php: ^8.0.2
• composer/installers: ~1.0
• spatie/schema-org: ~3.11
• winter/storm: ~1.2.0
• winter/wn-backend-module: ~1.2.0
• winter/wn-cms-module: ~1.2.0
• winter/wn-system-module: ~1.2.0

MIT

• AS Milano

• plugin
• cms
• seo
• winter

README

Installation

You can install plugin with Composer:

composer require "as-milano/wn-seo-plugin"

How to use

Meta tags

To enable meta tags, place the SEO component in one or more of your layouts. Make sure meta tags are enabled from the settings page.

Dynamic meta tags

SEO meta tag fields support twig syntax, this makes them more flexible when you have a website with many records and you need to use their attribute values for search results, or generate the title and description of the page from a model field.

Winter.Translate support

The twig syntax is very helpful, it allows you to do something like this:

{{ "This is the meta title of my page" | _ }}

After rendering the page the first time, the string will be registered by the Winter.Translate's _ filter as a translation message. This means that these meta tags can become multilingual.

Restrictions

• Sitemap.xml fields don't use dynamic fields.
• If you are using only one {{ }} inside a the property field of a schema.org component, you need to add at least one trailing space, from the code of the page not the October interface. Example:

[schemaVideo]
description = "{{ episode.serie.summary }} " <-- this is the trailing space

Automating the sitemap.xml

To automatically generate the sitemap.xml, follow the steps below:

1. Make sure you have the sitemap.xml enabled in the settings page.

   

2. Go to the editor page of your CMS, static or blog post page, and on the "SEO" tab check the "Enable in the sitemap.xml" checkbox.

   

3. Visit: http(s)://yourdomain.tld/sitemap.xml

Note: The fields in the "Sitemap" section are not dynamic.

Custom models

If you have a custom model that you want to generate the links from, add the full class name of your model in the "Settings" tab of the CMS page. If the page has the blogPost component, you don't need to set the Model class.

Important: The URL parameters of the page, for example: /post/:slug, will be replaced by the attribute values of the model with the same name, so you must ensure the model has an attribute called slug in this case.

Adding structured data (schema.org)

The plugin comes with components that define some schema.org objects (Article, Product and VideoObject). These components are also available as snippets for Winter.Pages and their properties support twig syntax.

It's highly recommended that you read the Google guidelines if you're not familiar with structured data.

To use these components, all you need to do is drag the ones you need from the inspector to the page editor. Do not place them inside the page code as they are rendered by the seo component.

Important: component field values enclosed in {{ }} are automatically interpreted by October as external properties (https://octobercms.com/docs/cms/components#external-property-values). If you have only one brace pair, then the output will be an empty string if October can't find the external property. As a workaround, You must add a trailing space like this:

However, if using multiple braces you won't need to add any space.

Open Graph & Twitter cards

The configuration is done via the Open Graph tab. If you don't know about these tags read the guide for Open Graph from Facebook and the guide for Twitter cards from Twitter.

Note: Twitter cards are automatically set from the OG * fields.

Currently supported tags are:

• og:titledefaults to page meta_title | page title
• og:description defaults to page meta_description | site description in the Settings page
• og:image defaults to page image|site image in Settings page - Open Graph tab
• og:type defaults to "website"
• og:site_name set in the settings page.
• twitter:title from og:title
• twitter:description from og:description
• twitter:image from og:image

Note: read the guidelines from Facebook and Twitter linked above for recommended values on these tags.