neos cms and seo
TRANSCRIPT
![Page 1: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/1.jpg)
NEOS & SEO
![Page 2: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/2.jpg)
Sebastian Helzle• Product Owner
@ punkt.de / Karlsruhe• Neos Core Team Member• @sebobo
![Page 3: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/3.jpg)
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
![Page 4: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/4.jpg)
Motivation
![Page 5: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/5.jpg)
The bad parts
![Page 6: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/6.jpg)
The good parts
![Page 7: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/7.jpg)
Better code
![Page 8: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/8.jpg)
The SEO Package
![Page 9: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/9.jpg)
What it does for you• Provides Mixins for adding
• Simple metadata• OpenGraph data• Twitter Cards• Canonical Link• XML Sitemap
![Page 10: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/10.jpg)
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
![Page 11: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/11.jpg)
Other packages• Search for SEO in the
Neos package list
![Page 12: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/12.jpg)
Tracking with Google & Piwik
![Page 13: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/13.jpg)
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
![Page 14: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/14.jpg)
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
![Page 15: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/15.jpg)
Advanced Mobile Pages with Fusion
![Page 16: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/16.jpg)
![Page 17: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/17.jpg)
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
![Page 18: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/18.jpg)
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
![Page 19: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/19.jpg)
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!
![Page 20: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/20.jpg)
primaryContent = Neos.Neos:PrimaryContent { @process.replaceImgTags = ${String.pregReplace( value, '/<img (.*?)>/s', '<amp-img layout=responsive $1>')}}
![Page 21: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/21.jpg)
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/
![Page 22: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/22.jpg)
Some notes• Can help political debate• Compare sources• Good for areas with slow internet
• Especially in developing countries• Mainly supported by Google
![Page 23: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/23.jpg)
Rich snippets and cards with Fusion
![Page 24: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/24.jpg)
<div> <span>Julius Caesar at Shakespeare's Globe</span> <span>Wed 01 October 2014 19:30</span></div>
![Page 25: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/25.jpg)
<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>
![Page 26: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/26.jpg)
<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>
![Page 27: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/27.jpg)
Rich search results
![Page 28: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/28.jpg)
Rich Cards
![Page 29: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/29.jpg)
What’s possible• Google provides several
visualizations for different types• Recipes• Events• Products• Reviews
• Check out Google Search Gallery
![Page 30: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/30.jpg)
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
![Page 31: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/31.jpg)
Google Webmastertools
![Page 32: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/32.jpg)
Json-LD as datasource
![Page 33: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/33.jpg)
prototype(Neos.Neos:Page) { head { ampLink = Neos.Fusion:Tag {}
blogMicroData = Shel.Blog:MicroData { @if.isBlogEntry = ${q(documentNode).is('[instanceof Shel.Blog:BlogEntry]')} } }}
![Page 34: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/34.jpg)
prototype(Shel.Blog:BlogEntry) { @process.addMicrodata = Shel.Blog:BlogMicroData}
![Page 35: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/35.jpg)
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)} }}
![Page 36: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/36.jpg)
Concept for a SEO editing mode
![Page 37: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/37.jpg)
Prototype• Show set data in a
structured view• Highlight problems
and good parts
![Page 38: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/38.jpg)
More ideas• Preview like Google
• Needs desktop preview, AMP, etc…• Twitter Card preview
![Page 39: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/39.jpg)
Even more ideas• Component for React UI with live updates• Integration with Elasticsearch for content analysis• Finish & release the package in a stable version
![Page 40: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/40.jpg)
Some notes• Find concept on github.com/Sebobo/Shel.SeoView
• Copy and extend!
![Page 41: Neos CMS and SEO](https://reader034.vdocuments.net/reader034/viewer/2022042513/58ec9eb31a28ab8a4b8b4771/html5/thumbnails/41.jpg)
Questions?