Add dynamic metadata to an Angular CLI Project
In this lesson we will create a UiService and inside that service we create some application defaults, import the Title and Meta services from @angular/platform-browser and create a function called setMetaData.
This function will set the metadata of the application based on the config parameter.
We set some defaults and define a list with tags. We then loop over the tags and invoke the updateTags method from the Meta service.
Once our service is ready we update the ProductListComponent and ProductDetailComponent to dynamically set the meta data by using the tap operator in the pipe from our Subscription.
After building and deploying the app we see that the meta data gets updated, and we can now share the app over Social Media and get rich social previews.
Instructor: [00:04] We run nggs to generate the UI service. Let's define some default properties in this file. We set app color to #343a40. We set app image to link to our logo. We set app title to store, and in our app description, we add a description for a store.
[00:18] Inside the constructor, we inject private title title and private meta meta, which are both imported from Angular/platform-browser. We define a method called setMetadata, which takes a config parameter. We take the description from the config object, or else use the defaults. We use the same thing for image.
[00:38] For the title, we want to append the app title if we get one from the object, or otherwise, just show the app title. We invoke this.title.setTitle, and pass in the new title. Next, we create an array called text, in which we define all the meta text that we want to set.
[00:55] We set description to description. We set team color to this.appColor. Then we add a Twitter cart of type summary, Twitter image, which takes the image, Twitter title, which takes the title, Twitter description, which takes the description.
[01:10] Then apple-mobile-web-app-capable, set to yes, app-status-bar-style set to black translucent, apple-mobile-web-app-title set to title, apple-touch-startup-image set to image, and lastly, a few properties. ogTitle to title, ogDescription to description, and ogImage, set to image.
[01:26] The last step is to loop over these tags in the array using for each. Inside that, we take the tag, and we pass it into this.meta.updateTag. In order to use this new method, we open product list components and inject private UI service into the constructor.
[01:45] We define the method metadata, which takes a product property of type product array. In this method, we invoke this.UI.setMetadata, and we pass an object with the title property set to products, and the description with a nice promotional text.
[01:59] Then inside the pipe, below our map operator, we add a tap operator, which gets imported from RXGS/operators. We take products, and pass it in this.metadata. When we refresh the page, we can see that the metadata updates.
[02:13] Let's quickly do the same for product detail component. We inject private UI UI service. We create metadata, which takes product like product. We call into this.UI.setMetadata. We add a title, a description, and set the product image.
[02:30] We then go to the pipe, append the tap operator and pass product into this.metadata. When we build and deploy the app, we see that the metadata is now updated. When we pass a product URL in the Twitter cart validator, we see that this also enabled social previews.
Same here, any ideas why?
I was able to verify the tags on the product list and detail page. I pushed my site to now and tried the twitter validator but it failed: INFO: Page fetched successfully INFO: 3 metatags were found ERROR: No card found (Card error)
Any ideas?