Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Neos CMS and SEO

1,469 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Neos CMS and SEO

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

×