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

Add Jekyll SEO plugin #86

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Jekyll SEO plugin #86

wants to merge 1 commit into from

Conversation

jbampton
Copy link
Contributor

@jbampton jbampton commented Dec 23, 2020

  • Add all the Apple touch and Microsoft icons
  • Fix Jekyll config error
  • Add a browserconfig.xml file
  • Add alt, title, width and height attributes to images
  • Add lang="en" to the start html tag
  • Add meta viewport tag
  • Created maskable icon
  • Created Safari pinned tab icon
  • Add all the Android icon sizes
  • Set favicon.ico to 48px square
  • Strip blank line from HTML
  • Fix missing HTTPS on link
  • refs Fix Google Lighthouse errors #85
  • refs Favicon errors and tester #89

https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/
https://github.com/jekyll/jekyll-seo-tag

When running bundle exec jekyll serve

Screen Shot 2020-12-23 at 10 21 17 pm

In Safari desktop browser they have the concept of a pinned tab and you can have a different icon for a pinned tab.
Depending on what color the tab bar is it should look like this:

Screen Shot 2020-12-24 at 4 07 09 am

@jbampton jbampton changed the title Add all the Apple touch and Microsoft icons WIP- Add all the Apple touch and Microsoft icons Dec 23, 2020
@jbampton jbampton changed the title WIP- Add all the Apple touch and Microsoft icons WIP- Add Jekyll SEO plugin Dec 23, 2020
@jbampton jbampton changed the title WIP- Add Jekyll SEO plugin Add Jekyll SEO plugin Dec 23, 2020
@jbampton
Copy link
Contributor Author

jbampton commented Dec 23, 2020

https://web.dev/add-manifest/
https://developer.mozilla.org/en-US/docs/Web/Manifest/icons
https://stackoverflow.com/questions/23043429/what-is-a-simple-minimal-browserconfig-xml-for-a-web-site

In the manifest we now have all the icons with the maskable icon seen at the bottom of the manifest.
This is how it looks in Firefox:

Screen Shot 2020-12-24 at 3 32 46 am

Screen Shot 2020-12-24 at 3 32 55 am

@jbampton jbampton force-pushed the add-icons branch 5 times, most recently from de3cf18 to 77b78d5 Compare December 23, 2020 22:24
@jbampton
Copy link
Contributor Author

refs #85

You may not get the same scores on each Lighthouse run.

Before from the PDF:

Screen Shot 2020-12-24 at 9 13 34 am

Now on my local machine:

Screen Shot 2020-12-24 at 9 13 09 am

@jbampton
Copy link
Contributor Author

The SEO score should go higher when it's tested on the real domain.

Screen Shot 2020-12-24 at 9 25 59 am

@jbampton
Copy link
Contributor Author

Jekyll SEO adds some HTML markup to the HTML head tag.

It uses the Open Graph Protocol and JSON for Linking Data

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

Data is messy and disconnected. JSON-LD organizes and connects it, creating a better Web.

https://ogp.me/
https://json-ld.org/
https://search.google.com/structured-data/testing-tool
https://developers.facebook.com/tools/debug/

Screen Shot 2020-12-24 at 1 15 11 pm

@jbampton
Copy link
Contributor Author

You can also test a website here -> https://web.dev/measure/

Similar scores and some of the same tests.

Screen Shot 2020-12-24 at 2 55 05 pm

Screen Shot 2020-12-24 at 2 55 13 pm

@jbampton
Copy link
Contributor Author

Hey @matz this one is ready for review 👍 🚀 💯

- Add all the Apple touch and Microsoft icons
- Fix Jekyll config error
- Add a `browserconfig.xml` file
- Add `alt`, `title`, `width` and `height` attributes to images
- Add `lang="en"` to the start `html` tag
- Add `meta viewport` tag
- Created `maskable icon`
- Created `Safari pinned tab icon`
- Add all the Android icon sizes
- Set `favicon.ico` to 48px square
- Strip blank line from HTML
- Fix missing HTTPS on link

https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/
https://github.com/jekyll/jekyll-seo-tag
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant