Googlebot viewport

Oh, I am not really good with CSS. Maybe yns.wtf has an idea?

Quote from Ben

However, this results in a wrong marker within the sticky table of content widget on the right hand side. If the asset with the CSS is activated, menu items will not be highlighted properly there.

Any ideas or recommendations? Thanks in advance.

Best regards,

Ben

Display More

Hi Ben,

I'm not a pro with css and never worked with vh values before, but it sounds like similar problem I faced in the path.

I'm guessing a global css rule is styling the element you wrote about not the way you would like to have it.

As far I know the styles closest to the object a div for example applies. Sometimes it is easier just to overwrite with: !important; the values interfere to reach the desired results.

If you can describe exactly what you want to reach on which element on that site then we can figure out for sure how to do that.

What I can imagine why it goes wrong that you try to change the way pagekit handles the viewport things. Pagekit has an own viewport system that is more old fashioned one in compare to the viewport settings you used.

Additional info: the support of the viewport techniques differs from browser to browser and different version of the browsers, so to reach max compatibility it should always be considered to use the technique that is most supported.

Kind regards,

Fossy

Well, the toc only does the things that are visible. It adds an element and some JS to the page.

So I can not imagine that this has something to do with the viewport...?

I guess the problem with the highlighted menu items has something to do with the additions you made - the TOC gets the height of the page and all elements once it’s initiated. If you change these values later, it does no longer match.

Just one thing: Build your websites for your users, not for search engines.

Wow, I‘m feeling very smart today

Well I see the problem now Ben has on that page especially on tablet and landscape mode of my smartphone. The logo isn’t scaling as well the positionenig of the text below the graphics on hero position isn’t fitted well.

I can’t imagine that it is the toc Extension fault either.

Quote from Ben

Guys, thanks. I think you got me wrong unfortunately. TOC extension is doing well. However Googlebot does not interpret the whole text below which cannot be ignored from SEO perspective. That‘s why I tried to adjust the viewport to make it visible. Then the TOC does not work properly anymore.

btw: I would love to have one regular session per week to inspect and discuss such issues live to learn from each other, e.g. Google Hangout. Someone interested?

Well when it comes to seo the extension from Roman was always doing a good job for me. I'm still sure it is a combination of the navigation structure, good content, right keywords and nice meta description. Never had an issue to let index Google bot what ever I wanted.

In general I agree with Roman to build a site from a user point of view to have the best experience on your site is way more important then anything else. Seo you can do always on top after all.

Quote from Ben

btw: I would love to have one regular session per week to inspect and discuss such issues live to learn from each other, e.g. Google Hangout. Someone interested?

Great idea!

Quote from Ben

Thanks for your feedback. I do understand and appreciate your opinion and suggestions. However, as SEO has top priority, I have to find a technical solution.

If you don't mind, we could analyse this problem together during our hangout next Wednesday, as it is easier to describe the dependencies this way.

SPQRInc  Fosphatic Duke

Hi Ben,

well i analysed the problem you have and i would suggest not to use the button class for displaying this content, well at least you could consider to add an additional css class to override the the viewport and styling settings. The problem is when you move from the default css stylings that if you change it on such an important class like a button class it will effect all of your used buttons on that page. That is not the way i would style a thing. A special position an exception like in this case need a special treatment without breaking same class elements on different places. All in all you have only to style this class the way you like and it should work fine then.

Regards,

Fossy

I added a new css class and named it ben-teaser to center the element add the uk-align-center class:

This class i would style with a new css asset with Romans extension like this for example mobile device first, then tablet and desktop viewport queries:

Beside that you styled the toc element in the wrong way a bit, at least on small devices! The following inline styling causing a breakout on smartphones:

With all paddings and margins you can't take a value above the used width on main elements! It is in your case 330px and you try to use 350px that is not a good idea at all. I would change it to 330px or even better just to 100%. In general try to think "responsive" when it comes to styling i dislike the fixed values somehow even on the font i would always use a relative values.

May the pagekit be with you.

Quote from Ben

Thanks for your awesome input and nice hangout! Very appreciated. Unfortunately we have not been able to solve the main issue and original reason for this thread, but at least we do better understand the dependencies...

Well i guess there is no problem at all with toc plugin it is working almost fine It is the settings of the Plugin, you showed me yesterday the wrong settings of the plugin, not the one i needed to see first. I was pretty sure you were running this extension as widget but you showed me the config of the extension yesterday not the widget, because i don't saw anything at custom java script section.

I made a setup on my own site and could reproduce the "issue" but as i wrote before it is not an issue at all, when you understand how this toc plugin works!

Quote from Ben

However Googlebot does not interpret the whole text below which cannot be ignored from SEO perspective.

Hm... I still don't get the problem The googlebot crawls your site and interprets the HTML source. But it does not render the page every time. So I don't get why this should have a negative impact...?

So could you please link the result (current (faulty) state) and the expected result?