Introduction into currently available SEO packages for SEO. Examples how AMP and rich snippets & cards can be created with the help of Fusion. Concept for a SEO view to help editors improve pages.

1. NEOS & SEO

2. Sebastian Helzle
• Product Owner
@ punkt.de / Karlsruhe
• Neos Core Team Member
• @sebobo

3. 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

4. Motivation

5. The bad parts

6. The good parts

7. Better code

8. The SEO Package

9. What it does for you
• Provides Mixins for adding
• Simple metadata
• OpenGraph data
• Twitter Cards
• Canonical Link
• XML Sitemap

10. 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

11. Other packages
• Search for SEO in the
Neos package list

12. Tracking with
Google & Piwik

13. 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

14. 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

15. Advanced Mobile
Pages with Fusion

17. 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

18. 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

19. 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!

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

21. 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/

22. Some notes
• Can help political debate
• Compare sources
• Good for areas with slow internet
• Especially in developing countries
• Mainly supported by Google

23. Rich snippets and
cards with Fusion

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

25. <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>

26. <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>

27. Rich search results

28. Rich Cards

29. What’s possible
• Google provides several
visualizations for different types
• Recipes
• Events
• Products
• Reviews
• Check out Google Search Gallery

30. 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

31. Google Webmastertools

32. Json-LD as datasource

33. prototype(Neos.Neos:Page) {
head {
ampLink = Neos.Fusion:Tag {}
blogMicroData = Shel.Blog:MicroData {
@if.isBlogEntry = ${q(documentNode).is('[instanceof Shel.Blog:BlogEntry]')}
}
}
}

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

35. 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)}
}
}

36. Concept for a SEO
editing mode

37. Prototype
• Show set data in a
structured view
• Highlight problems
and good parts

38. More ideas
• Preview like Google
• Needs desktop preview, AMP, etc…
• Twitter Card preview

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

40. Some notes
• Find concept on github.com/Sebobo/Shel.SeoView
• Copy and extend!

41. Questions?