search

bdpettway19 / MI-449-SS17-741-html-meta-elements-_f2DoK

0 stars 0 forks source link

Project Feedback #1

Open bdpettway19 opened 7 years ago

bdpettway19 commented 7 years ago

@stuartpearman Can you take a look at this? It's hosted here and meets the following criteria:

KatieMFritz commented 7 years ago

Hi Barry, great job troubleshooting this! It's getting a lot better than when you showed me in class. :boom:

Valid HTML

Please fix your validator errors before resubmitting.

Location

The only location data I see is <meta name="gio.placename" content="US-CO">. Take another look at the lesson and update your location data. You'll need geo.position, ICBM, geo.region, and geo.placename. They should be consistent with each other; think of a real physical location for your store and have all the location information match it. Let me know if you get stuck! 🌎

Image for products page

Nice job overall troubleshooting your Facebook data! Your Twitter cards look great too. :sparkles: I'm getting an error for the image on the products page on both platforms. Looks like you're using this image link https://pettwayb-kapv98gmwdanx_f2dok.surge.sh/productimage.png but there's not a file with that name in your project. You probably meant productpic.png, although Product.png would be great too. (You'll want the full URL, I'm just shortening it here to make it easier to read.) 👍

Unique title & description for each page

The lesson didn't go into much detail about how to write good titles & descriptions (including title and meta name="description elements, Twitter metadata, and Facebook (og) metadata. Here are some more specific guidelines:

  1. Each page should have a unique title and description that describes that specific page for people who have no idea what your site is about (because they will see this info on social media or search results before they ever come to your site). From the lesson:

    [It's] common for homepages to describe the entire website. On every other page however, this information should be specific to the current page.

  2. Each page should (usually) have consistent titles and descriptions across platforms, i.e. the Twitter, Open Graph, and general titles and descriptions should all match each other. This helps users figure out whether they've already visited that page. It also makes life easier for you - you can just copy and paste! Once you get into more advanced site development, you can use the same variables across all three places.

  3. Titles and descriptions should be descriptive brief. Different platforms display different amounts of text, but I usually use 50-70 characters for titles, 100-150 characters for descriptions. Anything longer will likely get cut off. You'll want to describe the unique page so it's recognizable, without using too many characters.

Let me know if you have questions about any of this! I'm available on Slack. 😁

After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.

Thanks! :rocket:

bdpettway19 commented 7 years ago

Ready to check!

bdpettway19 commented 7 years ago

Ready to check

KatieMFritz commented 7 years ago

Valid HTML

Nice job fixing the HTML errors on index.html! 👍 I'm still seeing one on product.html.

Location

This is getting better, but it's still not complete - ICBM is empty on both pages. 🌎 

<meta name="ICBM" content="">

Missing Twitter?

I'm perplexed! 😕 Your pages work in the Twitter card validator, but I don't see actual twitter metadata on either of your HTML pages. Did you ever have it?

If you had it and removed it, the validator might be showing me cached data. If you never had it, I'm not sure how you got so lucky! Either way, you should add in twitter tags according to the docs linked in the lesson.

Facebook

Looks good! 🌴 🌞

Unique title & description for each page

Please review my tips from before. Ideally, you'll have one title and one description for each page, but it will be repeated for each type of metadata (basic/Google, OG/Facebook, Twitter). Slack me if you have questions about this! 😸

Use descriptive, unique commit messages

I notice your latest updates have the commit message "changes." This doesn't help me, or you, figure out what changed! It's important to use your commit messages to leave information for your future self and other developers. Say what the state of the project is ("X feature working, Y still buggy") or what you changed ("add location data, fix HTML errors").

Slack me or ask any of us in class if you'd like a little more coaching on how to write good commit messages. We expect them for all projects. :smile:

If you aren't sure what I'm talking about for any of those things, please reach out! The skills from this lesson are important if you plan to make any kind of public site, from a portfolio to a company website to a game or app download page. 💡