Merge pull request #503 from OughtPuts/improve-seo-on-blog

Address SEO Changes on Blog Page

Author: rafaelfranca

_includes/post.html

@@ -1,8 +1,13 @@
-<div class="blog__post">
-  <h6>{{ post.date | date: '%B %-d, %Y' }}</h6>
-
-  <dl>
-    <dt><a href="{{ post.url }}">{{ post.title | strip_html }}</a></dt>
-    <dd>{{ post.content | strip_html | truncatewords: 30 }}</dd>
-  </dl>
-</div>
+<li class="blog__post">
+  <div class="post-date">
+    <p>{{ post.date | date: '%B %-d, %Y' }}</p>
+  </div>
+  <div class="post-container">
+    <h3>
+      <a href="{{ post.url }}">{{ post.title | strip_html }}</a>
+    </h3>
+    <p>
+      {{ post.content | strip_html | truncatewords: 30 }}
+    </p>
+  </div>
+</li>

_pages/community.html

@@ -12,7 +12,7 @@
       <div class="heading__headline common-headline">
         <h1>We make Rails better.</h1>
 
-        <h4>Rails is improving every year from the work of thousands of volunteers contributing in ways big and small. Everyone can help make this framework better whether they’ve been using it since the beginning or they just started yesterday.</h4>
+        <p>Rails is improving every year from the work of thousands of volunteers contributing in ways big and small. Everyone can help make this framework better whether they’ve been using it since the beginning or they just started yesterday.</p>
       </div>
     </div>
   </div>

_pages/foundation.html

@@ -12,7 +12,7 @@
     <div class="heading__body">
       <div class="heading__headline common-headline">
         <h1>The Rails Foundation.</h1>
-        <h4>A non-profit organization helping our ecosystem prosper.</h4>
+        <p>A non-profit organization helping our ecosystem prosper.</p>
       </div>
     </div>
   </div>

_sass/common/_headline.scss

@@ -34,7 +34,7 @@
     line-height: 34px;
   }
 
-  h4 {
+  h4, p {
 
     color: $color-black;
     font-size: 26px;
@@ -110,14 +110,10 @@
       line-height: 43px;
     }
 
-    h4 {
+    h4, p {
       font-size: 39px;
       letter-spacing: -0.01em;
       line-height: 44px;
     }
-
   }
-
-
-
 }

_sass/modules/_blog.scss

@@ -6,6 +6,18 @@
     max-width: 1080px;
   }
 
+  h2 {
+    color: $color-black;
+    font-size: 23px;
+    padding: 0px;
+    font-weight: 600;
+    line-height: 42px;
+  }
+
+  span:hover h2 {
+    color: $color-red;
+  }
+
   &__posts,
   &__pagination {
     margin-left: 30px;
@@ -18,21 +30,29 @@
 
     border-top: 3px solid rgba($color-black, 0.1);
     padding-top: 30px;
+    display: flex;
+    gap: 30px;
+
 
-    h6 {
+    
+    .post-date {
+      flex: 1;
+    
+      p {
       font-size: 21px;
       font-weight: 600;
       letter-spacing: -0.006em;
       line-height: 26px;
       margin-top: -7px;
+      }
     }
 
-    dl {
-
+    .post-container {
+      flex: 3;
       margin-bottom: -6px;
       margin-top: 1px;
 
-      dt {
+      h3 {
 
         color: $color-black;
         font-size: 31px;
@@ -50,10 +70,9 @@
           }
 
         }
-
       }
 
-      dd {
+      p {
 
         color: $color-grey-5;
         font-size: 21px;
@@ -105,12 +124,15 @@
       gap: 30px;
       padding-top: 40px;
 
-      h6 {
-        flex: 1;
-        margin-top: -1px;
+      .post-date {
+        p {
+          flex: 1;
+          margin-top: -1px;
+        }
       }
 
-      dl {
+
+      .post-container {
         flex: 3;
         margin-top: -8px;
       }

_sass/modules/_heading.scss

@@ -26,7 +26,7 @@
       padding-bottom: 3px;
     }
 
-    h4 {
+    h4, p {
       padding-top: 17px;
     }
 
@@ -166,10 +166,9 @@
         padding-top: 4px;
       }
 
-      h4 {
+      h4, p {
         padding-top: 20px;
       }
-
     }
 
     &__button {

blog/index.html

@@ -4,29 +4,41 @@
 ---
 
 <div class="heading common-padding--bottom-small common-padding--top-small">
+  <div class="container">
+    <div class="heading__body">
+      <div class="heading__headline common-headline">
+        <h1>The Rails Blog: News & Release Notes</h1>
+        <p>Discover the latest Rails news, version releases, community updates, and feature announcements.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="blog common-padding--bottom-small">
   <div class="container">
     <div class="heading__body">
       <div class="heading__headline common-headline">
         <div class="heading__buttons">
           <ul>
-            <li><a href="/blog"><span>Everything</span></a></li>
-            <li><a href="/category/releases"><span>Releases</span></a></li>
-            <li><a href="/category/news"><span>News</span></a></li>
-            <li><a href="/category/foundation"><span>Foundation</span></a></li>
+            <li><a href="/blog"><span><h2>Everything</h2></span></a></li>
+            <li><a href="/category/releases"><span><h2>Releases</h2></span></a></li>
+            <li><a href="/category/news"><span><h2>News</h2></span></a></li>
+            <li><a href="/category/foundation"><span><h2>Foundation</h2></span></a></li>
           </ul>
         </div>
       </div>
     </div>
   </div>
 </div>
 
+
 <div class="blog common-padding--bottom">
   <div class="container">
-    <div class="blog__posts">
+    <ul class="blog__posts">
       {% for post in paginator.posts %}
         {% include post.html %}
       {% endfor %}
-    </div>
+    </ul>
 
     {% if paginator.next_page %}
       <div class="blog__pagination">

world/index.html

@@ -9,7 +9,7 @@
     <div class="heading__body">
       <div class="heading__headline common-headline">
         <h1>Rails World</h1>
-        <h4>Shaping the future of Ruby on Rails.</h4>
+        <p>Shaping the future of Ruby on Rails.</p>
       </div>
     </div>
   </div>