neos cms and seo
TRANSCRIPT
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?