I have an Angular page www.title.org
running via AWS Cloudfront.
This project has some meta information in the index.html
file, like:
<meta property="og:title" content="Title" />
<meta property="og:description" content="Bla bla" />
<meta property="og:image" content="image.png" />
<meta property="og:url" content="www.title.org" />
However when I post www.title.org/quiz
in social media I want there to be a different thumbnail than image.png
in the preview.
I have attempted using Angular Meta in my quiz.component.ts
file:
this.meta.updateTag({ name: 'og:title', content: 'Title' })
this.meta.updateTag({ name: 'og:description', content: 'New description' })
this.meta.updateTag({ name: 'og:image', content: 'image_2.png' })
this.meta.updateTag({ name: 'og:url', content: 'www.title.org/quiz' })
but this doesn't change the thumbnail or anything else for that matter.
How do you change thumbnails depending on what route you are linking to for an Angular page?
Update: I attempted create a new index file, with different meta data and a redirect. So in quiz/index.html
I have:
<head>
<meta charset="utf-8">
<meta property="og:title" content="My quiz" />
<meta property="og:description" content="Do the quiz" />
<meta property="og:image" content="image_2.png" />
<meta property="og:url" content="https://www.title.org/quiz" />
...
</head>
<body>
<script language="javascript" type="text/javascript">
window.location.href = "https://www.styreskolen.org/quiz";
</script>
</body>
So if I post https://www.styreskolen.org/quiz/index.html
I should get the new meta data, but no such luck. It does however work on Skype, so it almost seems like LinkedIn just doesn't care what I do, and just wants to look at my root code.
Okay, in the end my way to solve this was to create a separate bucket with a Cloudfront distribution with its own domain name www.quiz.title.org
that only contained an index.html
file redirecting you to www.title.org/quiz
and the meta data that I wanted.