Reverse Actual HTML Code Without Affecting Page Display

Have a well-written article.  Lots of good content.  

On top of the page is a detailed set of in-house text ads.  

First thing spiders see when arriving at the page is this word salad of ads.  Ranging from services to products, these words can be far removed from the actual content of the page.  

The page is appropriate for the advertiser.  But, the text in their ads can be far afield from the content of what we'd like the page to be indexed for.

Have heard in the past that there is a way to write HTML so one could have specific elements up at the top of the code of the page, even though those elements may themselves be physically lower on the page itself, when rendered.

So that the code of the page would look something like this

<header>
</header>
<body>
<h1s h2s and well-written content>
<batch of text ads>
</body>

While the page itself would RENDER as

Batch of Text Ads
H1s H2s and Well-Written Content

I'd seen the code for doing this in the past.  Need examples of how it could be done today.

Many thanks,

OT
oaktreesAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MarisaWeb DesignCommented:
The most basic way to do it would be to put the ad content at the bottom of your body code, but put an inline style in that ads div telling it to place it X number of pixels from the top of the page.

This would be the very basic code, but you'd have to play around with it to get it exactly how you wanted it.

<div>
This is all the main content.
</div>

<div style="position: absolute; top: 150px;">I want this to render on top</div>

Open in new window


Obviously if you have a responsive design with navigation or other elements on the very top of the page that change height based on screen size, you'll have to move that css from its inline location to your main css file, and change the pixel value for each media query.
Ishaan RawatDesigner | Developer | ProgrammerCommented:
You can use flexbox for this.

your html code:

<header>
</header>
<body>
<div class="container">
    <div style="order:2">
        <h1s h2s and well-written content>
    </div>
    <div style="order:1">
        <batch of text ads>
    </div>
</div>
</body>

Open in new window


and in css:

.container {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Snarf0001Commented:
If you could post a link to the page that would be helpful.  There are usually many ways to accomplish, but the structure you already have would make some better / worse.

Flexbox offers a handy "order" property that does exactly that and lets you swap the actual order of items in the page layout.  But sometimes you can get the same effect with proper floats depending on the layout.

Absolute positioning, and moreso inline styling should be avoided for many reasons.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

oaktreesAuthor Commented:
WWWOW! You all are the BOMB!  Will share these with the folks who are helping me.  Please stand by over the weekend & Monday - one guy won't be around on Monday - and I'll reply as soon as we've had a chance to test. :))))))))))))))))))))))))))))))))))))))))))))  

Have any of you ever built a page like this, or seen one that works / currently exists online?

Thank you VERY, VERY muchhhhh!  :)))))))))))))))))))))))))))))

Sincerely,

OT
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This kind of thing was done more 10 and 15 years ago when search engines where not as smart and you wanted your main content to be first in code, but not on the page. Perhaps main content was preceded by navigation. Today that is not needed and actually can muck things up for a responsive site.

If you think about a modal, many times the actual code as at the very bottom of the page, hidden until it is needed. Then visually it is center or top and "above" everything else.  Or a responsive site may convert something on the left to the top or the right to the bottom going from desktop to mobile.
oaktreesAuthor Commented:
Hi Scott,

Sounds like you're saying a Flexbox set up like this would break responsive design?

Sincerely,

OT
Snarf0001Commented:
I think he just means that from an SEO perspective, your issue isn't that critical anymore.

Flexbox layout actually makes responsive styling far easier, and provides a solution to a host of common issues.
Converting something from the right to the bottom for example can be easily done.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I was really referring to when sites looked like below.  Visually, left content comes before main, but coded it was after.

<div container>
     <div main-content>
      <div left-navigation>
 </div>

Open in new window

For just content, this is a non factor and now coding content in the similar order it is displayed visually does not hurt you as far as seo.
<div container>
     <div left-navigation>
     <div main-content>
 </div>

Open in new window

Responsive coding does move things around, but in a logical order.
<div container>
     <div left-navigation>
     <div main-content>
             <div content-1 large-screen-left small-screen-top>
             <div content-1 large-screen-right small-screen-bottom>
 </div>

Open in new window


This type of moving things around you do not typically see a difference other than a possible lift because you made the site easier for people in different viewports which makes the site more user friendly which keeps people on the site and that in turn helps your seo.

What you are proposing to do with ads may not do what you expect.  Without seeing what you are doing, I will not pass judgement. But if you have a spammy looking site where ads are pushing real content below the fold, it will not make a difference if you place the ad code at the top of your html page or the bottom.   If the site is visually spammy looking, users will not stay on the page and that will result in poor seo.  

What you might want to do is do some experiments https://www.google.com/analytics/optimize/features/ and test ad placement and weigh out revenue vs seo(time on page, bounce rate etc).  If the page is getting crappy seo but you are making a lot more money from ads, you may want to stick with that. Or you may find that ad placement works better in an area you didn't expect and seo gets a lift.
oaktreesAuthor Commented:
When I see the patience, professionalism and level of detail I feel impressed.  Thank you, Ishaan, Scot, Snarf & Marisa!!!
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Glad to help you 😁
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.