NEOS & SEO

Sebastian Helzle• Product Owner

@ punkt.de / Karlsruhe• Neos Core Team Member• @sebobo

Overview• Motivation• The Neos SEO package• Tracking with Google Analytics & Piwik• Accelerated Mobile Pages with Fusion• Rich snippets and cards with Fusion• Concept for a SEO editing mode

Motivation

The bad parts

The good parts

Better code

The SEO Package

What it does for you• Provides Mixins for adding

• Simple metadata• OpenGraph data• Twitter Cards• Canonical Link• XML Sitemap

What it does for you• Configurable XML Sitemap• Adds metadata to all page types• Metadata editable in the inspector• Good boilerplate for doing SEO in Neos

• Extend it• Override it• Provide automatic fallbacks for fields

Other packages• Search for SEO in the

Neos package list

Tracking with Google & Piwik

Analytics packages• See live data in the Neos backend• See how pages perform while editing

• Easier to decide if a page is valuable• Add tracking scripts• Backend modules for „easy“ configuration

• Depends a bit on the setup

Some notes• Google package maintained by core• Piwik package maintained by community

• Neos 3.0 compatibility released• What’s missing

• Separate configurations for multi-sites• Persist configuration edited via the backend module• Fully simulate production on staging

Advanced Mobile Pages with Fusion

What is AMP• Guidelines for HTML, Javascript & CSS• Allows validation• Goal is to increase performance

„Instant articles“• Forces you to make less cluttered sites• Automatically runs optimizations• Can be cached by Google • Highlighted in search results

AMP specials• Provides special components & tags• Is extended all the time with new functionality

• Tracking• Interactive elements• Effects• More on https://www.ampproject.org/docs/reference/components

• Platform support see https://www.ampproject.org/support/faqs/supported-platforms

Working example• Checkout out the `shel/blog` package• Rendering switch for AMP mode

• Injects JS & CSS• Replaces special tags like img• Alternative URLs for discovery• Get inspired and copy!

primaryContent = Neos.Neos:PrimaryContent { @process.replaceImgTags = ${String.pregReplace( value, '/<img (.*?)>/s', '<amp-img layout=responsive $1>')}}

Other ways of doing it• AMP for a few sites <-> AMP for the whole page• Use a few specials or a lot• Override prototype templates for AMP (by Daniel Kestler)

https://www.medienreaktor.de/blog/2017/03/24/instant-articles-und-google-amp-mit-neos/

Some notes• Can help political debate• Compare sources• Good for areas with slow internet

• Especially in developing countries• Mainly supported by Google

Rich snippets and cards with Fusion

<div>  <span>Julius Caesar at Shakespeare's Globe</span>  <span>Wed 01 October 2014 19:30</span></div>

<div itemscope="" itemtype="http://schema.org/TheaterEvent">  <span itemprop="name">Julius Caesar at Shakespeare's Globe</span>  <div itemprop="location" itemscope=""

itemtype="http://schema.org/PerformingArtsTheater">    <meta itemprop="name" content="Shakespeare's Globe"/>    <link itemprop="sameAs" href="http://www.shakespearesglobe.com/"/>    <meta itemprop="address" content="London, UK"/>  </div>  <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">    <link itemprop="url" href="/examples/ticket/0012301230123"/>  </div>  <span itemprop="startDate" content="2014-10-01T19:30">Wed 01 October 2014

19:30</span>  <div itemprop="workPerformed" itemscope="" itemtype="http://schema.org/CreativeWork">    <link itemprop="sameAs" href="http://en.wikipedia.org/wiki/Julius_Caesar_(play)"/>    <link itemprop="sameAs" href="http://worldcat.org/entity/work/id/1807288036"/>    <div itemprop="creator" itemscope="" itemtype="http://schema.org/Person">       <meta itemprop="name" content="William Shakespeare"/>       <link itemprop="sameAs" href="http://en.wikipedia.org/wiki/William_Shakespeare"/>    </div>  </div></div>

<script type="application/ld+json">{  "@context": "http://schema.org",  "@type": "TheaterEvent",  "name": "Julius Caesar at Shakespeare's Globe",  "location": {    "@type": "PerformingArtsTheater",    "name": "Shakespeare's Globe",    "sameAs": "http://www.shakespearesglobe.com/",    "address": "London, UK"  },  "offers": {    "@type": "Offer",    "url": "/examples/ticket/0012301230123"  },  "startDate": "2014-10-01T19:30",  "workPerformed": {    "@type": "CreativeWork",    "name": "Julius Caesar",    "sameAs": "http://en.wikipedia.org/wiki/Julius_Caesar_(play)",    "sameAs": "http://worldcat.org/entity/work/id/1807288036",        "creator": {      "@type": "Person",      "name": "William Shakespeare",      "sameAs": "http://en.wikipedia.org/wiki/William_Shakespeare"    }  }}</script>

Rich search results

Rich Cards

What’s possible• Google provides several

visualizations for different types• Recipes• Events• Products• Reviews

• Check out Google Search Gallery

How to use it• Checkout structure on schema.org• Either add data in html or via Json-LD

• Markup needs to be taken care of• Json-LD can be appended

• Split presentation from data• Verify on https://search.google.com/structured-data/testing-tool

Google Webmastertools

Json-LD as datasource

prototype(Neos.Neos:Page) { head { ampLink = Neos.Fusion:Tag {}

blogMicroData = Shel.Blog:MicroData { @if.isBlogEntry = ${q(documentNode).is('[instanceof Shel.Blog:BlogEntry]')} } }}

prototype(Shel.Blog:BlogEntry) { @process.addMicrodata = Shel.Blog:BlogMicroData}

prototype(Shel.Blog:MicroData) < prototype(Neos.Fusion:Tag) { tagName = 'script' attributes.type = 'application/ld+json'

@context {}

content = Neos.Fusion:RawArray { '@context' = 'http://schema.org' '@type' = 'NewsArticle' headline = ${q(documentNode).property('title')} datePublished = ${Date.format(q(documentNode).property('publicationDate'), 'c')} dateModified = ${Date.format(q(documentNode).property('_lastModificationDateTime'), 'c')} description = ${String.stripTags(q(documentNode).property('entrySummary'))}

mainEntityOfPage = Neos.Neos:NodeUri { node = ${documentNode} absolute = true }

author = Neos.Fusion:RawArray { '@type' = 'Person' name = ${q(documentNode).property('authorName')} }

publisher = Neos.Fusion:RawArray {}

image = Neos.Fusion:RawArray {}

@process.toJson = ${Json.stringify(value)} }}

Concept for a SEO editing mode

Prototype• Show set data in a

structured view• Highlight problems

and good parts

More ideas• Preview like Google

• Needs desktop preview, AMP, etc…• Twitter Card preview

Even more ideas• Component for React UI with live updates• Integration with Elasticsearch for content analysis• Finish & release the package in a stable version

Some notes• Find concept on github.com/Sebobo/Shel.SeoView

• Copy and extend!

Questions?