GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Add Jekyll SEO plugin by jbampton · Pull Request #86 · mruby/mruby.github.io

Conversation

@jbampton

@jbampton jbampton commented Dec 23, 2020 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor
  • 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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions
@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 force-pushed the add-icons branch from 2cb7d39 to a3ed9ef Compare December 23, 2020 14:30
@jbampton jbampton changed the title WIP- Add all the Apple touch and Microsoft icons WIP- Add Jekyll SEO plugin Dec 23, 2020
@jbampton jbampton mentioned this pull request Dec 23, 2020
Favicon errors and tester #89
Open
@jbampton
jbampton force-pushed the add-icons branch from a3ed9ef to 4dfc77a Compare December 23, 2020 17:59
@jbampton jbampton changed the title WIP- Add Jekyll SEO plugin Add Jekyll SEO plugin Dec 23, 2020
@jbampton

jbampton commented Dec 23, 2020 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor Author

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
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@jbampton
jbampton force-pushed the add-icons branch 5 times, most recently from de3cf18 to 77b78d5 Compare December 23, 2020 22:24
@jbampton

jbampton commented Dec 23, 2020

Copy link
Copy Markdown
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
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@jbampton

jbampton commented Dec 23, 2020

Copy link
Copy Markdown
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
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@jbampton
jbampton force-pushed the add-icons branch from 77b78d5 to c0861b3 Compare December 24, 2020 00:12
@jbampton

jbampton commented Dec 24, 2020

Copy link
Copy Markdown
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
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@jbampton

jbampton commented Dec 24, 2020

Copy link
Copy Markdown
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
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@jbampton
jbampton force-pushed the add-icons branch from c0861b3 to 79f754f Compare April 11, 2021 08:33
@jbampton
jbampton requested a review from matz as a code owner April 11, 2021 08:33
@jbampton

jbampton commented Apr 11, 2021

Copy link
Copy Markdown
Contributor Author

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@jbampton
Add Jekyll SEO plugin
39979c2 
- 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
@jbampton
jbampton force-pushed the add-icons branch from 79f754f to 39979c2 Compare April 11, 2021 11:44

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@matz matz Awaiting requested review from matz matz is a code owner

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

1 participant

@jbampton
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.