I have read about adding a meta description previously, so have since always added it to the exported .html file within the < head > as the first line.
The added text is along the lines of this:
< meta name=“description” content=“My Name - A very short description of website”/ >
(the spaces in infront of the < > only so it appears on this post)
I then save the file and upload it to the web hosting site along with the exported resources folder.
I have never been able to see the added meta description appear below my website heading and instead get some text which google I presume has found from within my website - normally a section from the about page.
You can add code to your post by using the </> button in the editor. <meta name="description" content="My Name - A very short description of website" /> <!-- It makes text look like this -->
Your example has curly quotes. Was that a forum formatting thing, or is your code using curly quotes too?
The trouble might be if you’re not including the HTML file from the Hype export. Are you placing the Hype project on a different HTML page or are you using the one included from the export?
The screenshot is the source code from a Hype test project in preview mode. Notice how it says “copy these lines”… if those lines aren’t included, then the changes to the “head” wouldn’t be moved too.
…but I tested it out and it seems to work as expected.
I couldn’t seem to see that option to add in a line of code, but good to know for next time so it is formatted correctly.
I looked into which type of quotes I used. The content= part of the line has a different style of quotes (curly quotes) compared to the meta name= quotes. Well spotted!
I have now changed the quotes so they all match the meta name= quotes (not curly)
To add the meta description I export the hype project and then open the .html file in Textwrangler and paste the meta description in. I will now re-upload the site with the changed quotes and hopefully this should make a difference.
...but this is a profession where a single misplaced character can break a whole project. Curly quotes, instead of straight quotes, in HTML code is an example of that. Here's a picture to show you why...
...that's syntax highlighted code in Visual Studio Code. (I use that app for web development.) It's the same line twice... or is it?
NO! IT'S NOT!
You can see how the coloring changes where it shouldn't... but also, “description” ≠ description ...because that's what you're saying when you use curly quotes. You're saying the name includes curly quotes. HTML doesn't always require quotes to set a value. But in the "content" part of your meta tag, you can see how using curly quotes causes the error. You're basically saying... content=“My ...and then it sees a space. It thinks you're done, as that's how new attributes are defined in HTML tags. They're separated by spaces. So, if your value has spaces in it... which it does ...you need quotes (regular quotes) to specify that.
I don't know if that's what's causing the problem, but curly quotes to set attribute values is wrong.
@jonathan – I don't know if this issue qualifies as a bug, as the syntax highlighting in Hype is different than Visual Studio Code...
I totally understand that I need the right type of quote for different instances, so I just need to check over a little more thorough next time.
I believe it takes roughly 1 / 2 days for a websites meta description to change on Google, so I will take a look over the next few days to see if it has been resolved, hopefully it will be correct!
Isn't this the reverse? Hype isn't coloring the values since they are not using the correct quote. Visual Studio Code is coloring them incorrectly. You'd never know name="description" is invalid with their coloring. (Granted, if you didn't know Hype does color values you'd also be in trouble with Hype).
Well, the main difference that I like, is that Visual Studio Code colors the main HTML tag as one color, the attribute as another color and the value as a third color… dark red, red and blue.
Hype is only showing blue and brownish… which I think makes it harder to notice the mistake.
I’m not sure that Visual Studio code is incorrectly highlighting values, as wouldn’t they be… “description” …and… “my …as the curly quote appear to be the value?
