Angular 2+ 社交分享链接预览

Question

I am working on an Angular 4 application, which has a feature that generates different feedback form links based on different criteria's. So it can have hundreds or thousands of links generated each day.

What i want to do is make all these links rich in terms of social sharing ie each link if pasted on a social media such as facebook, it should be able to have metadata specific to that form ie all links will have different form names and descriptions. Each link specific data should be fetched when the link is pasted on facebook, twitter, etc.

How to approach this requirement. How to implement this? Thanks in advance.

Answer 1

You need to implement 2 things to solve the problem:

1. Implement Open Graph Tags on you index.html page. You need to change these meta tags based upon the URL you are routing the user to via Meta Service in angular. Refer to the URL for further information https://alligator.io/angular/meta-tags/
2. Post this use server side rendering using Angular Universal.
3. Use Facebook debugger to verify the content generated.

If your project can't implement SSR (due to static server) then above points won't work with facebook, twitter, linkedin, whatsapp.

You need to go for solutions like: Angular 4 - Update Meta tags dynamically for Facebook (Open graph)

1. Proxy Rendering. prerender.io
2. .htaccess with PHP.