When using Angular Universal with dynamic meta tags on Firebase Cloud Hosting, you may encounter issues with social platforms not displaying the correct meta tags. This is because social platforms often use their crawlers to fetch and cache the HTML content, including the meta tags, when the page is shared. As a result, the dynamically generated meta tags may not be picked up by the crawlers.

To address this issue and ensure that social platforms display the correct meta tags, you can follow these steps:

  1. Set Up Server-Side Rendering (SSR) with Angular Universal: Ensure that Angular Universal is properly set up for server-side rendering. This means deploying the server-side-rendered version of your Angular app to Firebase Cloud Hosting instead of the client-side rendered version.

  2. Implement Dynamic Meta Tags on the Server Side: In Angular Universal, you can set up dynamic meta tags on the server side using the Meta service from @angular/platform-browser. This will ensure that the meta tags are included in the server-rendered HTML.

    For example, you can set the dynamic meta tags in your component's server-side logic:

    typescript
    import { Component, OnInit } from '@angular/core'; import { Meta } from '@angular/platform-browser'; @Component({ selector: 'app-my-component', template: ` <!-- Your component template here --> ` }) export class MyComponent implements OnInit { constructor(private meta: Meta) {} ngOnInit() { // Set dynamic meta tags based on your data this.meta.updateTag({ name: 'description', content: 'Dynamic description for sharing' }); this.meta.updateTag({ property: 'og:title', content: 'Dynamic Open Graph Title' }); // Add more meta tags as needed } }
  3. Use angular-universal-express Server: When deploying your Angular Universal app to Firebase Cloud Hosting, consider using the angular-universal-express server to handle server-side rendering. This server setup ensures that the dynamic meta tags are included in the initial server response.

  4. Implement Server-Side Caching and Cache-Control Headers: To help social platforms refresh the cached content and pick up the latest meta tags, consider implementing server-side caching and setting appropriate Cache-Control headers in your server configuration. This way, social platforms will request fresh content from the server when sharing a URL.

  5. Test Sharing on Social Platforms: After implementing the above changes, test sharing your URLs on various social platforms (e.g., Facebook, Twitter, LinkedIn) to ensure that the dynamic meta tags are displayed correctly.

By following these steps, you can ensure that dynamic meta tags are correctly displayed on social platforms when sharing URLs from your Angular Universal app hosted on Firebase Cloud Hosting. Keep in mind that social platform behavior can vary, and it may take some time for the crawlers to refresh their caches and pick up the latest meta tags.

Have questions or queries?
Get in Touch