Search code examples
htmlangularlinkedin-apimeta

How do you get different Soc. M thumbnails for different routes in Angular?


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.


Solution

  • 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.