Challenge 1: Basic Metadata

[00:00:00]
>> We're done with the soft SEO stuff, the strategy, we're about to dive into some coding. And I've got one more slide and then we're gonna do an exercise and the exercise is all about this one slide. So these are the absolute basic lowest level pieces of metadata you can add to your app.

[00:00:24]
In terms of SEO, a title, a description, and keywords, keywords don't matter anymore. We're going to pretend they do for this exercise. Your title should be relatively short. Just because beyond this length search engines will truncate it right you only get one line and just typical browser would tell us that going beyond 65 characters, you'll start to chop things off.

[00:00:51]
A description is often heavily weighted towards, like, what search engines will interpret your site being all about. So this is where you want to put important metadata technical terms. Things that stand out that aren't just normal words, but it should be absolutely human readable. Some search engines will use this as the description under the title of your search result.

[00:01:20]
And keywords are by and large ignored, but we'll all use them for this. So what we're gonna do is take our starting point app, and I'm gonna show you how to use it in a moment. We're gonna add metadata like this to the app and it is currently absent or incorrect in some form.

[00:01:39]
And then we're gonna end up deploying this app to Heroku. So, the way we're going to start is this project that you've downloaded. First, I want you to make sure that you do a git pull origin master, like make sure that you pull down the most recent copy of this SEO workshop project.

[00:02:02]
I was polishing it last night and I want to make sure everyone has the most recent exercises. And I'm gonna fire it up and I'm going to do a little mini deploy for you all, just so we can all understand how this works. So what I have here If you're in the SASS workshop, this will look very familiar.

[00:02:27]
This is a similar. Thank you. This is a very similar setup here, where we have a folder called exercises. This is where you're going to live. Most of some of the exercises like build on the same sub folder. You know, in multiple iterations, but these all represent like many apps that we'll be working on.

[00:02:51]
And if we look at this deploy app, we'll see that we've got a couple files in here. We've got a folder called public. This is what the browser reads. This is what the browser ends up reading right? So we've got a CSS file that is generated from this sass.

[00:03:10]
So if you've used sass before, you could use sass in here if you choose to. We're not gonna be doing much with style today. But using CSS in this file is also fine. And then we've got this folder called views, and it has an extension called HBS. HBS is handlebars.

[00:03:28]
It's a superset of HTML. So all valid HTML works in this file. But if you get down here, you may notice that it looks like I don't have any handlebars here. Let's see that so this is just literal HTML. You might in the future see stuff that looks like this, like capitalize something like that.

[00:03:50]
So we can use little non HTML expressions to put like dynamic pieces of data in our HTML, I'll show you a more meaningful example just so we understand what this is all about. So here we're going to use data that has been retrieved from a real API for a list of courses.

[00:04:13]
And here you can see we've got a an unordered list and then we loop over a list of courses and for each course, we put a list item in place. So this is as complex as it's gonna get and each and you really won't need to touch the handlebars portion of this, but I do want you to know what you're looking at here.

[00:04:34]
And I want you to know that it works just like HTML. Any HTML we work with today, you can put in place. This just lets me make some data with the HTML before I place it back on the screen. So, we'll be working in this deploy folder first.

[00:04:50]
And what you have here is something called instructions for deployment. So if we start this app up, which is gonna be run, dash e for exercise, and then the name of the exercises subfolder, which is deploy. Let me you know what I can do, click here and go up here.

[00:05:15]
Run dash e deploy. And if we look back at the slides here at the bottom of each slide, I have a command to run at the bottom. So you'll know exactly which of these to startup. So if we hit enter, oops, sorry, it's dot slash run. You'll see a little banner saying we've started the exercise and then you can go to localhost 3000.

[00:05:37]
You should see something that looks like this. So if you can't get to this step. Let me know or say something in the chat if you're watching this online so we can straighten you out. But judging by having used this before, it should work for most everyone. So then what we're gonna do, this app here it actually is the instructions for the exercise step by step.

[00:06:01]
That'll help you get this app on to Heroku. So if you've installed the Heroku command line tool, and logged in with it, using Heroku login, you're going to create a new app. And then you're going to configure that app with just two variables. One of these variables kind of tells Heroku which of the exercise subfolders to render.

[00:06:23]
So you'll be able to switch from the deploy folder to the AMP folder just by setting this environment variable and Heroku will like restart the app in two seconds and now you'll see something new on the site. And then finally, you just push to the Git remote that Heroku sets up for you, right?

[00:06:40]
So they you push to it, just like you would push to GitHub using Heroku master. And then once it goes through its thing once this command completes, you could run Heroku open to just open your web browser with the appropriate URL and you should see it. So I've already deployed.

[00:06:58]
Actually, I can deploy it for you right now. GIT push Heroku master and I have to do double dash force. Because I've deployed a later version of this. Oop, to the Heroku remote, some kind of going backwards in history which is why I have to force. And you'll see it'll go through installing a bunch of stuff and at the very end we should see, let me shrink it down so that we can see the bottom of this.

[00:07:33]
So that's about how long it should take. And you see it says like, some URL has been deployed to Heroku. So this is an automatically generated app name. You could either visit this in a browser or you could just do Heroku open. And it should open a browser for you with that URL.

[00:07:53]
In this case, let's see. Let's try that one more time. There we go. So here I'm viewing a later exercise. I can switch that. Like that. And there are our deploy instructions soon as it responds. There we go. Instructions for deployment. A little clipped off for you. But people watching online should see, is that clear to everyone.

[00:08:31]
So you're just going to add some metadata and deploy this and we're going to build on an example like this over the rest of the day, where we'll gradually we'll add, some Facebook metadata, some Twitter metadata some schema.org Open Graph stuff. And use some of the best testing tools available, to see how our app looks to these other sites that are important for us.