<app-seo src="polymer.json"> ... SEO custom element?

[oneezy]

What would it take to do this?

I could imagine a custom element going in and pulling the fragment pages to create "SEO snapshots" from the polymer.json manifest. That might look something like:

<app-seo src="polymer.json">
    <business-app></business-app>
</app-seo>

[ebidel]

I think for starters, it would be cool if app-route had a solution to update page <meta> when a new route is navigated too.

[AndreasGalster]

Should this be restrictive with the meta tags like i. e. many people would already be happy with just title and meta description. Or do we want to make it possible to define any meta tag, so probably passing key/value pairs as objects?

[oneezy]

@zacharytamas created the <page-title> custom element seen here.

This could be a good starting point.

[AndreasGalster]

I guess syntax could be something like this. Either split it up into seperate elements for title and meta tags, or make it possible to define all relevant meta-data in one element.

The question is whether we'd want this to be included in app-route or if it wouldn't just make sense to have this as a seperate element sitting on the same root as app-location, listening to the path and using something like iron-...uh selectable I think to choose which one to update?

I've just hacked an element together that sets a title-tag and a meta-tag like so:

          <iron-meta-tag
          title='Finding roommates made easy - houseme'
          meta='{ "description": "Are you looking for a roommate? We will help you find the perfect one!" }'>
          </iron-meta-tag>

          <iron-meta-tag meta='{ "property": "og:title", "content": "Finding roommates made easy - houseme"}'>
          </iron-meta-tag>

https://www.houseme.space/

Can't test it yet. I've just set this MVP up yesterday and just set up prerender.io a few hours ago and it hasn't rendered any pages yet but if I recall correct once pre-rendered with prerender.io those dynamic open graph meta tags should be picked up properly.

[cdata]

@ebidel Updating page meta is fundamentally orthogonal to the design of the <app-route> element. I like @AndreasGalster 's approach of building a separate element that can pair with <app-route> to achieve the desired effect. WDYT?

[ebidel]

s/"app-route had a solution"/"a solution that works with app route"

:)

[AndreasGalster]

I think your message got cut off @ebidel . s/app-route? Guess you were linking something?

[ebidel]

Nope, just being to clever. I meant: "app-route had a solution" -> "a solution that works with app route" in my original comment.

[CaptainCodeman]

I had a go at creating something to help with the SEO / meta-tag updating.

Here's what I came up with (any feedback appreciated): https://github.com/CaptainCodeman/app-metadata

I tested it out by creating a test site: http://app-metadata.appspot.com/

This has the metadata set from the element:

this.fire('app-metadata', {
  title: 'Why use Agile Project Management?',
  description: 'How Agile Project Management Methodologies help compared to the old Waterfall approach to Project Management',
  keywords: 'scrum, scrum master, agile, training, certification, professional, certified, CSM, PSM'
});

The content shows up in Webmaster Tools (using Fetch as Google) and the meta tags appear in the Google index: https://www.google.ca/search?q=site:app-metadata.appspot.com

[rictic]

That's awesome! That seems like the right approach to me @CaptainCodeman.