Social Media MetaTag Generator
For Node.js Beginners: How To Step by Step
I am a newb.
But here it goes, anyways.
Social Media meta data is annoying. Every time I want to share a project on Facebook, Twitter, Slack or whatever I have to look up all the weirdness of OG and Twitter Cards. After all, I want my links to magically “unfurl” into something other than blue underlined text.
https://www.crappy-link/no-metadata/too-lazy/have-no-clue/index.html
I want cool links without having to do much work. Enter a metatag generator. A useful tool and a good project for someone like me, working with node for all of two weeks. I want links that are cool, like this:
The Node App
Video Overview
Step One: Project Setup
I used express generator. Super easy. It sets you up with express and some boilerplate for a basic app. I made mine in Cloud 9 (which comes with Node, Git and a bunch of stuff). Obviously, you need Node for this.
npm i -g express-generator
express [cool name for project directory]
cd [cool name]
npm install
npm start
Seriously easy. You get Jade as a template engine. Of course, you can set it to use something else, but for the rest of this guide we are streamlining. Ok? Good.
If you are new to Jade/Pug you can check out the Jade Docs. Below you will find plenty of example code. Template engines are confusing at first, but really nice after a little adjustment period. Also this HTML to Jade Converter is awesome.
Step Two: Design Inputs
My site in the video has an image uploader. That is another story. We will substitute my select menu for a regular input, you just have to host your image somewhere so it has a url. No big deal.
To make things simple you can just open /views/index.jade. All you have do is make a form with some inputs. I kept it simple with title, url, description, twitter handle(not needed really), and image url.
Certain things are important here. The form action and method. The action is where the form will POST to. See how method is set to ‘POST’. We are also using an input of type submit. The .button class is for Foundation, but you can use whatever CSS Framework you want. Also, note that we have used the ‘name’ attribute. This is what we will use to get this data in our route handler, which we will build now.
Step 3: Design Route Handler
So this form will POST to /api/metatags. We need to handle that in our app. Let’s open /routes/index.html. Now we make a new route. I like to do them like this:
First off, ignore author. That is a virtual method on a mongoose thing, another story once again 😜.
Now we have the data that is entered into the form. I am lazy, so I gave req.body an alias of a. The Body Parser middleware that comes pre packaged in our setup lets us easily grab this information. We use bracket notation because dot doesn’t work with the dashes in node. We are referring to the ‘name’ property on those inputs.
I do the simple thing here. I make an array called payload. I then render /views/metatag and pass in an object with the key of data and value of payload. Now I can use that data in the template. If you are following along, you can create a new view, or even simpler, just render the same view as the form was on again. Most likely ‘index’.
Step 4: Render the Meta Tags
The cool thing about template engines like Jade/Pug is you can conditionally render based on data you pass in. You should be able to include this in the top of your /views/index.jade.
This is just an example to display how data is interpolated. None of this will show up until the form is submitted and there is actual data. I chose to put mine above the form. Since we used an array we don’t need any loops, we already know where everything is. The syntax is pretty straight forward.
You don’t need all the extra spans and classes, but I wanted to spruce up the look of my output.
I used Facebook Developer Guide and Twitter Developer Guide to look up the meta tag format, for hopefully the last time. Both have links to testing, where you can enter your link URL and see what the card will unfurl as. Useful, since you don’t have to post to find out.
Step 5: Enjoy Your Work
Sure it takes a little effort to set up. But now you can enter 5 inputs and have all the tags you want instantly. Just copy and paste into the head of your html files. You can also add in other meta data like charset, title, and whatever else is out there. You have the option to use whichever results you want. AND, you made this yourself. Better to have more meta-data than you need, rather than a dull underlined link as your Facebook status.
Couple Key Take Aways:
Use DOUBLE QUOTES when templating the meta tags. Single quotes will backfire in your face when an apostrophe is entered. Plus, the scrapers for Facebook and Twitter didn’t seem to pick up the metadata when I (in my lazy ways) used single quotes originally.
Stay tuned for more beginner ‘How To Step by Step’ articles for beginners. Plus checkout my YouTube Channel. Possibly, how to setup this AWS S3 Uploader….which is pretty cool i think.
