Shane Profile picture
May 6 โ€ข 16 tweets โ€ข 7 min read
Friday thread time featuring images!

Here's a quick summary thread on how I structure my content pages on my sites.

I'm currently in the process of moving my older sites into this format too.

๐Ÿงต #seo #nichesites #nichecontent
First up we have a header section this has

โœ… Relevant image. Optimised and responsive.
โœ… Large title, usually the main keyword
โœ… Breadcrumb - make sure to use Breadcrumb Schema
โœ… Table of Contents - Longer posts this should be collapsed with a "show table of contents" button
Core Section - We have an introduction section which includes

โœ… H2 with a variation on the H1
โœ… Large lead paragraph
โœ… Bold paragraph that solves the question the page is trying to answer
โœ… Continuation paragraph to lead into the rest of the sites content
Then we go into the optional sections. These can be used in any order, any number of times throughout the page.
Option 1 - is a basic Image and Content block. This has

โœ… H2 that is relevant to the content in this section
โœ… Well spaced content section with short paragraphs
โœ… Internal linking to other pages on the site if possible
โœ… Optimised WebP / Avif Image on the right
Option 2 - This is the same as the previous section except we have the image and the content flipped
Option 3 - A Double Image section

This is something I tend to use between block paragraphs of content|

โœ… Make sure all images are responsive, optimised WebP or Avif images
Option 4 - List section which comes with

โœ… H2 that is relevant to the content in this section
โœ… Introduction sentence
โœ… List items - If possible I format by length. I've seen this a lot on Twitter. Potentially some science to it but IDK ๐Ÿคฃ
โœ… Outro paragraph
Option 5 - A basic content section which has

โœ… H2 that is relevant to the content in this section
โœ… Well spaced content section with short paragraphs
โœ… Internal linking to other pages on the site if possible

Try to not have 2 of these blocks together to avoid a wall of words
Core Section - FAQ Section which contains

โœ… H2 that is the H1 text + FAQ
โœ… Intro paragraph
โœ… Multiple questions answered in short form
โœ… FAQ Schema - I've already got featured snippets using this
โœ… Internal linking to other pages on the site if possible
Core Section - Summary section which contains

โœ… H2 to start the summary
โœ… A few short paragraphs to round off the page
โœ… Internal linking to other pages on the site if possible
Using this sectioned layout you should be able to create long, easy to consume pages for your users that keep them on your site.

The core sections all stay, the optional sections you can choose any number of depending on what section fits the content you're trying to write.
Also on a general page level, don't forget Schema markup!

Depending on what you're writing about there is likely markup that can help

Review - schema.org/Review
Recipe - schema.org/Recipe
Product - schema.org/Product
Place - schema.org/Place

#techseo
There are a large number of opportunity for ad placements here too.

You can drop ad spaces between each sections or even replace some of the images with Ads.
And thats it. Thats the end of the thread ๐Ÿ™Œ

How do you structure your pages?
Do you have anything additional that I don't?
Bonus Tip: I used Pixlr to create these images. pixlr.com

It's like photoshop except its free and runs in your browser.

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh
ใ€€

Keep Current with Shane

Shane Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @shanejones

Jun 22, 2020
In this thread.

"How I lowered the page load time of CNN.com from 18 seconds to 2.75 seconds with no development work".

#pagespeed #webperf #techseo
Here is some more proof. Below you can see the before and after screenshots of my tests and times in the Chrome Network tab.

Caveat: the Finish time never stops on CSS due to external scripts constantly running. The screenshot was when it stabilised though. CNN BeforeCNN After
Post 3! The game is up! I didnโ€™t really do this. :D

Iโ€™m going to show you how in DevTools you can measure the potential gains that can be had by removing bloated scripts. This method is great to get buy-in from other teams before going ahead deleting anything from the code.
Read 16 tweets
May 20, 2020
After yesterday's Lighthouse changes going live you probably want to know how to optimise for the new metrics which are

Largest contentful paint
Total Blocking Time / First Input Delay
Cumulative Layout Shift

Here is a thread with some quick pointers.

#sitespeed #webperf #ux
โ€” Optimising Largest Contentful Paint

Reduce response times from the server - CDN's can help here

Reduce render blocking JS and CSS - try to only load the minimum on a per page basis. Minify, inline and defer are your friend. Check usage using code coverage tool in Dev Tools
โ€” Optimising Largest Contentful Paint - cont.

Imagery - Make sure they are well optimised and compressed. Also keep an eye on those sizes. Look into image CDN's and lazyloading

Preloading - You can use preload the most important elements on your page
Read 9 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(