Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blog posts should use h1 for titles #294

Open
ghost opened this issue Apr 9, 2020 · 9 comments
Open

Blog posts should use h1 for titles #294

ghost opened this issue Apr 9, 2020 · 9 comments
Labels

Comments

@ghost
Copy link

@ghost ghost commented Apr 9, 2020

Articles are very hard to discover (or they may not appear where needed) via search engines because of lack of SEO.
Let's take a look at some examples:

1- let's look at this randomly picked article, so let's copy the first 2 sentences and introduce them in a SE (Search Engine). DDG gives us this link https://kelly.writeas.com as the first result. This is bad because it should have returned this link. Google gives us this link as the first one and that's it, on the first page there are no other results that would link to kelly.writeas.com. This is a huge problem.

2- let's look at another randomly picked article, copy the first paragraph and paste it in various SEs. DDG: nothing. Google: nothing.

3- We could look at more examples but I think the idea is clear 😀 (when testing this yourself, make sure you pick an article that has been online for at least 24 hours because it's ok for fresh articles to not index well until the SE's bots find/index it)

To fix this, we need to optimize writefreely for SEs, there are various articles online that teach us how to do this, example: https://backlinko.com/on-page-seo#on-page-seo-basics

@ghost
Copy link
Author

@ghost ghost commented Apr 9, 2020

Here are the issues I could find for this post (which probably apply to all other posts):

  • <H1> is inside the <header> tag which AFAIK is bad, it should be inside the <body> and used for the main heading - H1 should be reserved post's title, not the the blog's name
  • AFAIK the body text should be wrapped inside <p> tags
@thebaer
Copy link
Member

@thebaer thebaer commented Apr 9, 2020

Thanks for the suggestion. Do you have any specific ideas on what areas need the most improvement? Or sources for the items you mentioned? To your second point, body text is already inside <p> tags.

WriteFreely handles the necessary metadata for a variety of situations -- posts with or without titles, posts including images, SEO-friendly URLs, etc. It scores highly for SEO on Google's Lighthouse tool (example report). If we're going to improve SEO, we need a concrete problem to address.

@gytisrepecka
Copy link
Contributor

@gytisrepecka gytisrepecka commented Apr 9, 2020

There is one fundamental recipe for online creators to understand - content is king. Search engines are smart enough to distinguish content that is suitable for searcher also considering personal factors.

Yes, HTML must be valid. But saying that one or another header tag will somehow magically affect position in search results is just bullcrap typically spread by agencies that sell SEO services. I've seen loads of stories including "your site will get worse results due to use of tables instead of divs" or "menus implemented without list elements will not be indexed".

There have been times in history when Google and Yahoo would even punish for too rich meta tags. Just some experts might be too young to remember those times.

Sitemaps are important, but more for new sites. As soon as you are indexed and revisited every few days search engines capture your site structure easily.

So don't get carried away. Plain text file is likely to perform much better if it serves unique and useful content than one with responsive, tag-rich and "seo friendly" fancy site but with sourced article.

Personally I have very good search results with my blog running on self-hosted, out-of-the-box WriteFreely. It is even surprising considering I haven't done any promotion except backlinks on my other two sites and Mastodon.

@ghost
Copy link
Author

@ghost ghost commented Apr 9, 2020

@thebaer For that, I need to do a more in-depth review of the code. If I'll find something concrete, I'll comment here. But so far the biggest issue I see is about H1.

Or sources for the items you mentioned?

from here https://backlinko.com/on-page-seo#on-page-seo-basics:

Wrap Your Blog Post Title in an H1 Tag

The H1 tag is like a mini title tag.
Most platforms (like WordPress) automatically add the H1 tag to your blog post title. If that’s the case, you’re all set.
But that’s not always the case. You want to check your site’s code to make sure your title is wrapped in an H1.

Alternatively you can look at how other 'big' websites are doing it. This page's H1 https://www.theguardian.com/world/2020/apr/08/coronavirus-crisis-has-transformed-our-view-of-whats-important is the title of the article itself:

<h1 class="content__headline content__headline--no-margin-bottom" articleprop="headline">
Coronavirus crisis has transformed our view of what’s important
</h1>

and it's placed inside the <header> tag .. ok so that's not an issue then. So the only thing to change here would be to wrap in H1 tags the title of each post and not the blog's name.

@gytisrepecka

Plain text file is likely to perform much better if it serves unique and useful content than one with responsive, tag-rich and "seo friendly" fancy site but with sourced article.

I agree, tho this is a completely different issue.

Yes, HTML must be valid.

This and maybe some other optimizations which 'make sense'. I agree with you that we shouldn't overdo it.

@thebaer thebaer added the bug? label Apr 15, 2020
@thebaer
Copy link
Member

@thebaer thebaer commented Apr 23, 2020

Agreed with @gytisrepecka on not excessively optimizing without verifiable improvements. So far looks like the bug to solve here is:

  • Use <h1> on blog post page title, instead of <h2>
@thebaer thebaer added enhancement and removed bug? labels Apr 23, 2020
@ghost
Copy link
Author

@ghost ghost commented Apr 23, 2020

Images need a value for the alt="" attribute.

https://moz.com/learn/seo/alt-text

We should ask the users to describe the image (max 125 characters) and have that as the value for the alt="" attribute. If the user doesn't wanna do that, then we may have to insert it with CSS (images with something written in the alt="" attribute to be inserted with HTML).

Describe the image as specifically as possible. Alt text is, first and foremost, designed to provide text explanations of images for users who are unable to see them. if an image truly doesn't convey any meaning/value and is just there for design purposes, it should live within the CSS, not HTML.

We could use a clever way of encouraging the user to write something: to show a modal right after the image is finished loading and have a placeholder in the modal which will be the name of the file, without the extension (.jpg, .png etc). And the user seeing this will want to erase and write something that's more appropriate and then click OK for the modal to close.

@ghost
Copy link
Author

@ghost ghost commented Apr 23, 2020

We may need to do some 301 redirects, from https://www. to https:// and from http://www. to https://

https://ahrefs.com/blog/301-redirects/

Right now this works:
https://kelly.writeas.com/if-you-look-at-your-time-do-you-spend-most-of-it-consuming-or-producing
but this doesn't
https://www.kelly.writeas.com/if-you-look-at-your-time-do-you-spend-most-of-it-consuming-or-producing
Firefox warns the user of a "possible risk", but even after accepting it, the user ends up on a page that says:

This page is missing.

Are you sure it was ever here?
 
@cjeller1592
Copy link
Contributor

@cjeller1592 cjeller1592 commented Apr 23, 2020

Images need a value for the alt="" attribute.

Alt text can be added in WriteFreely using Markdown syntax. It's explained in the WriteFreely guides here.

Here's the example in the guide:

![Cosmic radiation](https://i.snap.as/T05UTpx.jpg)

Cosmic radiation

A modal might be too invasive, but we could mention adding an alt attribute more explicitly in the docs. I like the idea of encouraging people though.

@thebaer thebaer changed the title writefreely doesn't have any SEO Blog posts should use h1 for titles Apr 24, 2020
@thebaer
Copy link
Member

@thebaer thebaer commented Apr 24, 2020

I appreciate the ideas, @DontUseGithub. But since WriteFreely is used in so many different ways by different people, I don't think the software should force everyone to populate every alt attribute (just as we don't force everyone to add a post title). The modal is a clever idea, but probably too much for our simple platform right now.

As for the redirects, we handle the basics of http to https redirection in WF when it's facing the public internet. Beyond that, I think www redirects are out of scope for the application, and should be handled in other ways, such as with a reverse proxy. (That's exactly what we're doing on write.as.)

I've updated the title of this issue to reflect the current issue to be solved here. Just note that this is lower priority for us, since overall SEO is already solid, and this fix will break many custom themes in the wild. So as part of this change, we'll also need to provide a migration path for users with custom CSS.

Either way, if anyone can address the <h1> issue and include automated CSS migration, we'll be happy to accept a pull request!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.