Angular + json-ld for on-page SEO with structured data

Working on site SEO. Had been trying to understand how to use JSON-LD to leverage schema.org structured data elements.

Thought this wasn’t something easy to do, given that you have to use a script tag to inject linked data (the LD in JSON-LD) into an Angular component, ie. this ImageObject example:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "ImageObject",
  "author": "Jane Doe",
  "contentLocation": "Puerto Vallarta, Mexico",
  "contentUrl": "mexico-beach.jpg",
  "datePublished": "2008-01-25",
  "description": "I took this picture while on vacation last year.",
  "name": "Beach in Mexico"
}
</script>

Turns out Cory Rylan put together a blog post + repo explaining how to do it (which opens up messing around with the script tag injection for other things like pinterest’s JS file for a pin button). Looking forward to checking it out.