Plone provides, out of the box, a very good and user-friendly SEO story but with the brave new world of single page applications and headless CMS this could change. In this talk I summarise the last 3 years of challenges and integrations needed to make a Headless Plone plus Angular application SEO friendly. Talk presented at Plone Conference 2017 (https://2017.ploneconf.org/talks/seo-challenges-of-a-single-page-application-using-plone)

1. SEO challenges of a
Single Page Application using Plone
Érico Andrei
PloneConf
Barcelona, 20/10/2017

2. Érico Andrei
• CTO @ Briefy.co
• Former Plone evangelist
• Just a Plone user

3. tl;dr;

4. Angular Universal

5. The basics

6. Layers of good practices
GOOD CONTENT
CODE STANDARDS
RENDERING / SPEED / MOBILE-FRIENDLY
SITEMAPS / ROBOTS.TXT

7. Plone was ready
✓ Dublin Core support
✓ Sitemap
✓ Robots
✓ Caching

8. Angular + Plone + …

9. Code
Semantic HTML
Basic metadata
TwitterCard / Open Graph
Schema.org

10. Rendering + Speed
Server side rendering
Angular Universal
Prerender.io
AOT, Lazy load
Caching
Responsive images

11. Sitemap + Robots.txt
Robots.txt
Sitemap(s)
Webmasters tools
Bing

12. How we did it

13. Angular + Prerender.io + (Micro)services
CMS
Content management
backend for Briefy website.
Using Plone CMS.
THUMBOR
Image server handling
automatic cropping, resizing
and image transforms
SITEMAP
Service that generates a
sitemap.xml for CMS and static
content.
SEO helper
API GATEWAY
Gateway and router
handling public accesses
to Briefy API

17. Pyramid 1.9 / Python 3.6
Index Adapter (Mapping other sitemaps)
CMS Adapter (Plone)
Static Adapter (Angular routes)
Listing Adapter (Not implemented @ Briefy)
Sitemap service

18. Thank you
Érico Andrei
erico@briefy.co
@ericof
https://briefy.co