Fresh + Deno: Metadata, Stylesheets, and Search Indexing
Sharing is caring, a term often an idiom, phrased anecdotally invites the idea of inviting others to take part in whichever it is that you hold near and dear.
In the age of social media, even before perhaps, the Word of Mouth (WOM) value of products, services, and just about everything — is propped up by communication. Sharing across the internet is commonplace as it builds value and draws a wide audience to interesting topics.
Internet Metadata
Optimizing the value of these shares for your sharing audience often focuses on the Metadata being shared with your content. From title to description to imagery, this information invites the user to be part of the great experience.
Optimizing Fresh + Deno for Sharing
When building a modern application with Fresh and Deno, the goal is quite often to communicate and build an audience towards an engageable audience.
You can follow these steps, developers, creators, and marketers alike often follow to establish a base for search indexing, sharing, and identification within web applications.
1. Generate MetaTags
Your meta tags will illuminate the content across the application. Using Meta tag generators can simplify the creation and inclusion of important tags.
2. Implement Head Component
Connecting Fresh + Deno through Preact Components is the implementation-specific fit that is familiar to many JavaScript frameworks.
Start by creating an `_app.tsx` file in the routes directory with the following contents, this will accept AppProps upon component rendering.
As this rendering process implements Deno’s server configuration, the component implied by `<Head>` is destructed and transformed by properties.
This begins in the Application file which renders child components to a parent component and extracts the child’s properties through instantiation. As it is the core file of reference, it is also the best place to load in any universal cascading style sheets (CSS).
3. Abstract Head Tag Properties
In the index.tsx file and proceeding pages within the routes folder, implement the `<Head>` component with unique MetaTags for each page.
These pages as child components to the parent component of `_app.tsx` will implement the specific tags from each [page].tsx file on component render.
Deploying to Deno Deploy
This begins in the Application file which renders child components to a parent component and extracts the child’s properties through instantiation. As it is the core file of reference, it is also the best place to load in any universal cascading style sheets (CSS).
Shipping these changes should be as simple as pushing them to GitHub, with an automated build step, the production deployment should reflect the updates.
Thanks for Reading, Keep Communicating!
Looking for more Application Development advice? Follow along on Twitter, GitHub, and LinkedIn. Visit online for the latest updates, news, and information at heyitsjoealongi.com.
