youtube / spfjs

A lightweight JS framework for fast navigation and page updates from YouTube
https://youtube.github.io/spfjs/
MIT License
2.24k stars 147 forks source link

Plans to support <meta> value updating? #258

Open ptshih opened 9 years ago

ptshih commented 9 years ago

For the very rare situation (not for search engine crawlers) where this might be useful, it might be nice to be able to update <meta> tags after navigating (like how <title> is updated).

For reference: http://stackoverflow.com/questions/2568760/is-it-possible-to-use-javascript-to-change-the-meta-tags-of-the-page

nicksay commented 9 years ago

It hasn't been on the immediate roadmap, but I agree that this would be a good enhancement.

Adding new or updating exiting <meta> tags could be done in a way consistent with how we add/update stylesheet <link> tags. We will ned to consider if removing <meta> tags is required, as there's no easy way to scope the values (like you can with CSS selectors).

What <meta> tags are you using that you'd like updated?

ptshih commented 9 years ago

I could see supporting Open Graph tags (og:title, og:description, etc...), Twitter tags, iOS tags, etc... being useful for some, myself included.

It seems to be only a subset of <meta> tags that actually matter (for example, things like viewport probably shouldn't change.

I feel this is pretty low priority - I can think of some easy workarounds by using SPF events in the meantime.

An example of this in the wild is medium.com. I remember reading on their engineering blog that they used a similar (albeit proprietary) technique as SPF.

rviscomi commented 9 years ago

Could this be done by setting an ID on the meta element and passing key-value pairs for the attributes you want to update in the attr property of the SPF response?

For example:

<meta id="foo" charset="utf-8">

This SPF response object

{ ..., attr: { foo: { charset: "somethingelse" }, ... }, ... }

would alter the element:

<meta id="foo" charset="somethingelse">
nicksay commented 9 years ago

@rviscomi That will definitely work for updating existing tags, and is a good immediate approach for anyone needing to do this right away. (Adding/removing tags — if required — still needs a solution.)

@ptshih My understanding of both the Facebook meta tags (og:title, fb:app_id, etc) and the Twitter meta tags (twitter:card, etc) meta tags is that they operate based on the crawled URL response, not the DOM: https://dev.twitter.com/cards/getting-started#crawling https://developers.facebook.com/docs/sharing/best-practices#crawl The Safari meta tags listed at https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html all seem like they wouldn't/shouldn't be updated across pages.

Are there any others you have in mind? Or are there situations those tags are used from the DOM I'm overlooking? I'd like to get a concrete use case to gauge priority.