[bisq-network/bisq-website] Fix and optimize image alt tags for better SEO (#321)

Steve Jain notifications at github.com
Mon Jan 27 05:48:13 UTC 2020


m52go requested changes on this pull request.

Some small nits such as "Redhat" --> "Red Hat".

But bigger issues are more concerning: a number of images were changed when they shouldn't have been changed. This PR wasn't supposed to change image links at all -- please keep PRs focused on the declared changes. I assume these were inadvertent on your part, but for me as reviewer, identifying and correcting such changes is unexpected and time-consuming. I'm still not sure I caught all of them. 

Please consider diffing your changes next time before submitting to verify nothing unintended has crept in...and of course, it's critical that you set up a testing environment if you haven't already (feel free to reach out if you're not familiar with what I'm talking about).

> @@ -30,8 +30,8 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
                               <div class="id-mac hidden">
                                   <div class="float-left">
-                                      <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g">
-                                      <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w">
+                                      <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac">
+                                      <img src="/images/icon-apple-w.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac">

```suggestion
                                      <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Mac">
```

Why was this changed?

> @@ -52,8 +52,8 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
                               <div class="id-rpm64 hidden">
                                   <div class="float-left">
-                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g">
-                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w">
+                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Redhat/Fedora">

```suggestion
                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Red Hat/Fedora">
```

> @@ -52,8 +52,8 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
                               <div class="id-rpm64 hidden">
                                   <div class="float-left">
-                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g">
-                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w">
+                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Redhat/Fedora">
+                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Redhat/Fedora">

```suggestion
                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Red Hat/Fedora">
```

>                            {{ item.androidNotificationsApp }}
                       </a>
 
 
                       <a href="https://itunes.apple.com/us/app/bisq-mobile/id1424420411" target="_blank" rel="noopener" class="downloads-ios hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'ios-notifications');">
-                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g">
-                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w">
+                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOs">

```suggestion
                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOS">
```

>                            {{ item.androidNotificationsApp }}
                       </a>
 
 
                       <a href="https://itunes.apple.com/us/app/bisq-mobile/id1424420411" target="_blank" rel="noopener" class="downloads-ios hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'ios-notifications');">
-                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g">
-                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w">
+                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOs">
+                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for iOs">

```suggestion
                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for iOS">
```

> @@ -263,14 +263,14 @@ <h2 id="join-the-community">{{ item.hJoin }}</h2>
 
       <div class="col-12 col-md-6">
         <ul class="community-links grey community-home pl-0 pl-md-4 pt-4 pl-md-0 pt-md-0">
-          <li><img src="/images/community/github.svg" alt="github"> <a href="https://github.com/bisq-network">{{ item.liGithub }}</a></li>
-          <li><img src="/images/community/keybase.svg" alt="keybase"> <a href="https://keybase.io/team/bisq">{{ item.liKeybase }}</a></li>
-          <li><img src="/images/community/twitter.svg" alt="twitter"> <a href="https://twitter.com/bisq_network">{{ item.liTwitter }}</a></li>
-          <li><img src="/images/community/youtube.svg" alt="youtube"> <a href="https://www.youtube.com/c/bisq-network">{{ item.liYoutube }}</a></li>
-          <li><img src="/images/community/forum.svg" alt="forum"> <a href="https://bisq.community">{{ item.liForum }}</a></li>
-          <li><img src="/images/community/mailinglist.svg" alt="mailinglist"> <a href="https://lists.bisq.network/listinfo/bisq-contrib">{{ item.liMailingList }}</a></li>
-          <li><img src="/images/community/irc.svg" alt="irc"> <a href="https://webchat.freenode.net/?channels=bisq">{{ item.liFreenodeIRC }}</a></li>
-          <li><img src="/images/community/reddit.svg" alt="reddit"> <a href="https://www.reddit.com/r/bisq">{{ item.liSubreddit }}</a></li>
+          <li><img src="/images/community/github.svg" alt="GitHub repository"> <a href="https://github.com/bisq-network">{{ item.liGithub }}</a></li>
+          <li><img src="/images/community/keybase.svg" alt="Keybase page"> <a href="https://keybase.io/team/bisq">{{ item.liKeybase }}</a></li>

```suggestion
          <li><img src="/images/community/keybase.svg" alt="Keybase team"> <a href="https://keybase.io/team/bisq">{{ item.liKeybase }}</a></li>
```

> @@ -30,8 +30,8 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
                               <div class="id-mac hidden">
                                   <div class="float-left">
-                                      <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g">
-                                      <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w">
+                                      <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac">
+                                      <img src="/images/icon-apple-w.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac">

```suggestion
                                      <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Mac">
```

> @@ -52,8 +52,8 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
                               <div class="id-rpm64 hidden">
                                   <div class="float-left">
-                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g">
-                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w">
+                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Redhat/Fedora">

```suggestion
                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Red Hat/Fedora">
```

> @@ -52,8 +52,8 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
                               <div class="id-rpm64 hidden">
                                   <div class="float-left">
-                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g">
-                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w">
+                                      <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Redhat/Fedora">
+                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Redhat/Fedora">

```suggestion
                                      <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Red Hat/Fedora">
```

>                            {{ item.androidNotificationsApp }}
                       </a>
 
 
                       <a href="https://itunes.apple.com/us/app/bisq-mobile/id1424420411" target="_blank" rel="noopener" class="downloads-ios hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'ios-notifications');">
-                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g">
-                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w">
+                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOs">

```suggestion
                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOS">
```

>                            {{ item.androidNotificationsApp }}
                       </a>
 
 
                       <a href="https://itunes.apple.com/us/app/bisq-mobile/id1424420411" target="_blank" rel="noopener" class="downloads-ios hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'ios-notifications');">
-                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g">
-                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w">
+                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOs">
+                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for iOs">

```suggestion
                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for iOS">
```

> @@ -145,7 +145,7 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
               </div>
               <div class="col-md-12 order-md-1 text-md-left homepage-hero">
-                <img class="img-fluid shadow-lg" alt="bisq" style="width: 100%; display: block;" src="/{{ page.lang }}/images/bisq_screen0.png">
+                <img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" style="width: 100%; display: block;" src="/images/bisq_screen0.svg">

```suggestion
                <img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" style="width: 100%; display: block;" src="/{{ page.lang }}/images/bisq_screen0.png">
```

Why was image source changed here?

> @@ -240,10 +240,10 @@ <h2>{{ item.hGetStarted }}</h2>
       </ol>
     </div>
     <div class="col-12 col-md-7 offset-0 offset-md-1">
-      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
-      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
+      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/bisq_screen0.svg"></div>

```suggestion
      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
```

> @@ -240,10 +240,10 @@ <h2>{{ item.hGetStarted }}</h2>
       </ol>
     </div>
     <div class="col-12 col-md-7 offset-0 offset-md-1">
-      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
-      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
+      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/bisq_screen0.svg"></div>
+      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/bisq_screen1.svg"></div>

```suggestion
      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
```

> @@ -240,10 +240,10 @@ <h2>{{ item.hGetStarted }}</h2>
       </ol>
     </div>
     <div class="col-12 col-md-7 offset-0 offset-md-1">
-      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
-      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
+      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/bisq_screen0.svg"></div>
+      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/bisq_screen1.svg"></div>
+      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/bisq_screen0.svg"></div>

```suggestion
      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
```

> @@ -240,10 +240,10 @@ <h2>{{ item.hGetStarted }}</h2>
       </ol>
     </div>
     <div class="col-12 col-md-7 offset-0 offset-md-1">
-      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
-      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen0.png"></div>
-      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
+      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/bisq_screen0.svg"></div>
+      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/bisq_screen1.svg"></div>
+      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/bisq_screen0.svg"></div>
+      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/bisq_screen1.svg"></div>

```suggestion
      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/{{ page.lang }}/images/bisq_screen1.png"></div>
```

> @@ -263,14 +263,14 @@ <h2 id="join-the-community">{{ item.hJoin }}</h2>
 
       <div class="col-12 col-md-6">
         <ul class="community-links grey community-home pl-0 pl-md-4 pt-4 pl-md-0 pt-md-0">
-          <li><img src="/images/community/github.svg" alt="github"> <a href="https://github.com/bisq-network">{{ item.liGithub }}</a></li>
-          <li><img src="/images/community/keybase.svg" alt="keybase"> <a href="https://keybase.io/team/bisq">{{ item.liKeybase }}</a></li>
-          <li><img src="/images/community/twitter.svg" alt="twitter"> <a href="https://twitter.com/bisq_network">{{ item.liTwitter }}</a></li>
-          <li><img src="/images/community/youtube.svg" alt="youtube"> <a href="https://www.youtube.com/c/bisq-network">{{ item.liYoutube }}</a></li>
-          <li><img src="/images/community/forum.svg" alt="forum"> <a href="https://bisq.community">{{ item.liForum }}</a></li>
-          <li><img src="/images/community/mailinglist.svg" alt="mailinglist"> <a href="https://lists.bisq.network/listinfo/bisq-contrib">{{ item.liMailingList }}</a></li>
-          <li><img src="/images/community/irc.svg" alt="irc"> <a href="https://webchat.freenode.net/?channels=bisq">{{ item.liFreenodeIRC }}</a></li>
-          <li><img src="/images/community/reddit.svg" alt="reddit"> <a href="https://www.reddit.com/r/bisq">{{ item.liSubreddit }}</a></li>
+          <li><img src="/images/community/github.svg" alt="GitHub repository"> <a href="https://github.com/bisq-network">{{ item.liGithub }}</a></li>
+          <li><img src="/images/community/keybase.svg" alt="Keybase page"> <a href="https://keybase.io/team/bisq">{{ item.liKeybase }}</a></li>

```suggestion
          <li><img src="/images/community/keybase.svg" alt="Keybase team"> <a href="https://keybase.io/team/bisq">{{ item.liKeybase }}</a></li>
```

> @@ -16,58 +16,65 @@
 
 
 <div class="dropdown-item btn-icon">
-  <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" />
-  <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" /> Download for Mac
+  <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac" />
+  <img src="/images/icon-apple-w.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac" />

```suggestion
  <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Mac" />
```

>    <div class="float-right">
     <a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">.deb</a>
   </div>
 </div>
 
 
 <div class="dropdown-item btn-icon">
-  <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" />
-  <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" /> Download for Red Hat/Fedora
+  <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Redhat/Fedora" />

```suggestion
  <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Red Hat/Fedora" />
```

>    <div class="float-right">
     <a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">.deb</a>
   </div>
 </div>
 
 
 <div class="dropdown-item btn-icon">
-  <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" />
-  <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" /> Download for Red Hat/Fedora
+  <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Redhat/Fedora" />
+  <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Redhat/Fedora" /> 

```suggestion
  <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Red Hat/Fedora" /> 
```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/bisq-network/bisq-website/pull/321#pullrequestreview-348446233
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.bisq.network/pipermail/bisq-github/attachments/20200126/1a4952f3/attachment-0001.html>


More information about the bisq-github mailing list