First, we import the meta and title services from the Angular Platform Browser package. These services are essential for manipulating the metadata and the title of a web page, which are crucial for search engine optimization. In our component or service, we inject meta and title into the constructor, making them available for use within the class.
When our component initializes, we call setTitle on the title service to set the document's title. This title appears in the browser tab. and is used by search engines to determine the topic of the page.
We also use the Meta service to add various meta tags. Here, we're adding a description tag, which search engines use to summarize the page's content in search results. We're including open graph meta tags, like Aug, Title, which define how URLs are displayed when shared on social media, contributing to a better user experience and potentially improved social media visibility. Now, We import transfer state and make state key, which are part of Angular's mechanism to efficiently transfer state from server to client during server-side rendering, helping maintain consistent CO and user experience.
Here, we create a state key. This key acts as a unique identifier for pieces of data we want to transfer between the server and the client side of our universal app. We inject the transfer state service into our component or service.
This service allows us to set and retrieve transferred state. On the server side, we use the set method to save data under our state key. This same data can later be retrieved on the client side, as part of the initial state.
On the client side, typically in the ngOnInit lifecycle hook, we use the get method to access the data we saved. If no data is found, a default value is provided. Next, we define a CO service.
marked as injectable so it can be provided and injected across our application. This service centralizes the functionality for updating our app's metadata and title. Inside our SEO service, we create an update title method that takes a title string parameter. It uses the title service to dynamically set the document title.
We also create an update meta tags method. This method takes an array of tag objects and uses the Meta service to update meta tags dynamically across different pages or in response to user interactions.