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 collectedview.io.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joe Alongi

Joe Alongi

80 Followers

Application Developer @IBM — JavaScript, Java, Kubernetes, and Cloud Native. (These Views Are My Own) collectedview.io