Is h1:before{ } a beneficial SEO technique?

Is it possible for <h1></h1> and h1:before{ content: "title";} to function in the same way as <h1>title</h1>?

As I develop a responsive web page, I want my name to be displayed at the top as a title within h1 tags such as "John Smith". However, on mobile browsers, the full name may not fit well with the navigation bar. In this case, I would like it to only display "John" on a mobile browser. By using a media query in my CSS along with the :before pseudo-element to adjust the content based on the viewport size, I can achieve this design.

Would having "John Smith" between the h1 tags still validate for SEO purposes?

htmlcssseo

Answer №1

There is some uncertainty surrounding the impact of using :after and :before in terms of SEO. These pseudo-elements add content to your stylesheet, which could be viewed as a questionable practice. A potential alternative approach might look something like this:

HTML: 

<h1>John <span class='hide-mobile'>Smith</span></h1>

CSS: 

@media (max-width: 768px) {
  .hide-mobile {
     display: none !important;
  }
}

Answer №2

Choose a title for the page outline, focusing on a larger size and including mobile features.

<h1 class="suppressed-on-mobile">John Smith</h1>
<div class="mobile-heading">John</div>

CSS:

.mobile-heading {
  display: none;
}

@media screen and (max-width: 400px) {
  .suppressed-on-mobile {
    display: none;
  }

  .mobile-heading {
    display: block;
    font-size: 150%;
    /* etc... */
  }
}

This setup ensures proper display for text browsers, search engines, and screen readers.

Remember to avoid putting actual content in CSS rules as search engines do not parse the content property.

Answer №3

Optimizing for mobile using media queries, try adjusting the word-spacing, applying white-space: nowrap;, and setting overflow: hidden on <h1> to push extra words off-screen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disable the click functionality while preserving the hover feature

Due to my previous question being incorrectly marked as a duplicate, even though it wasn't, and no one is rectifying the mistake, I am re-posting my inquiry. I am dealing with an <a> element that has a default onClick function. This <a> a ...

javascriptjqueryhtmlcss

Show the filename in the file upload field on Bootstrap 4

Utilizing Bootstrap 4 for my webpage, I have encountered an issue with the file upload option. When users select a file, the name of the file is not being displayed as it normally would in regular HTML. Can you please review my code and the accompanying sc ...

htmlcssbootstrap-4

What is the importance of being accurate in choosing html elements?

Currently, I am in the process of creating a sophisticated calculator using html5/css3/js. An interesting challenge arose when attempting to style the operator elements uniquely to differentiate them from the other keys (0-9). In my CSS file, I tried styl ...

htmlcsscss-selectors

Steps to creating a dynamic transformation of an INPUT field into a TEXTAREA within a Bootstrap4/jQuery web application

I'm curious about a way to have an INPUT field automatically transform into a TEXTAREA in the browser under specific conditions, such as the length of the text within it. Is there a method to achieve this without needing additional logic on the server ...

javascriptjqueryhtmlbootstrap-4

Bootstrap 4's responsive table design simplifies form fields by condensing them when the text is not visible

How can I resolve the issue of form field values not being visible when selected, especially when the table fits the screen? I want the table to be scrollable and ensure that the form fields are clearly visible. This problem is particularly noticeable in t ...

cssbootstrap-4html-tableresponsive

``Stylishly Designed CSS Tabs inspired by Google Chrome's Modern

Utilizing Material UI Tabs in React to create curved tabs resembling those seen in Google Chrome. The design requires the parent element to have a bottom border that extends across the entire row, appearing on both the tabs and other content on the right. ...

cssmaterial-uitabs

The default page length for datatables cannot be applied at this time

I am having trouble with setting the pageLength for a table in this code. Can someone assist me with this issue? $(document).ready( function () { $('#Campaign_Overview').DataTable({ "pageLength": 5, "lengthMenu": [5, 10, 25, 50] }); ...

javascriptjqueryhtmlcssdatatables

Error: Unable to locate the variable deleteChap

Utilizing Jquery to dynamically add elements to an element, I have included an onclick function to one of the <td> tags to trigger a function within the same file. Below is the code snippet for the element: let x = 0; let element = ` <td class=&q ...

javascripthtml

Position a broader div within a slimmer one

<div id="narrow"> <div id="wide"> </div> </div> In my web layout, there is a div with the ID of "narrow" containing another div with the ID of "wide", which has a wider width than its parent. The div with the ID "narrow" can ...

htmlcss

Troubleshooting Problem with ASP.Net MVC Recaptcha and Jquery Ajax interplay

I am currently incorporating a Google reCaptcha object into a page using ASP.Net MVC, without utilizing models in my forms. Although I have successfully displayed the captcha, the data entered always appears as null when inspecting the RecaptchaVerificati ...

jqueryhtmlajaxasp.net-mvcrecaptcha

Issue with strange symbols appearing in Safari on Mac

Hey there! I have this website built with asp.net and I have a text-box for filling in quantities. Sometimes, I notice this strange icon that looks like a human appearing on the text box. It only seems to show up when using Mac Safari browser. Check out th ...

jqueryasp.nettwitter-bootstrapcsssafari

Link hidden in Safari and Chrome on iPad due to relative positioning

I've encountered a challenge with my web page layout where I'm trying to position a button in a fixed location on the top-right corner, just below a fixed header. While it works perfectly on Chrome for Windows, Mac, and Android, it fails to displ ...

htmlcssbootstrap-4

Tips for preventing changes to the HTML code using the inspect tool

Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome. However, upon inspectin ...

htmljquerycssyoutubeyoutube-api

Build interactive web pages using Python scripts

By utilizing the Python scripts provided below, you can generate an HTML file with pre-set global variables (a, b, c, d). However, there might be instances when certain variables are not set globally, resulting in errors like "global 'a' is not d ...

pythonhtmlpython-2.7

Obtain the HTML5 data attribute from an event directly in the code

I am attempting to access the data attribute in the following manner (my doctype is html5): <a href="#my-link" data-zoom="15" onclick="alert(this.data-zoom); return false;">link</a> However, I am encountering an e ...

javascripthtmldom-events

Using the power of jQuery to load Ajax content, unfortunately, the content remains

Hey there, I'm currently working with an HTML file that utilizes AJAX to load content from other HTML files on the same server. However, for some reason, it's not functioning properly. I'm new to AJAX and I'm not sure what could be caus ...

phpjavascriptjqueryhtmlajax

Leverage CSS to manipulate image attributes

Is it possible to use CSS programmatically to set the attributes of my img tag? <span><img class="img-dollar"></img></span> <span><img class="img-royalty"></img></span> I am looking for a way to specify t ...

htmlcss

Focus on styling a single theader element within a jQuery Data Table with CSS

Struggling to work with a dynamic Jquery Data Table that has 10 table headers. I am having difficulty adding a class or an Id in the code to the specific th element with the title 'Unused'. In my .css file, I attempted: [title~= Unused] { ba ...

jquerycssdatatablecss-selectors

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

There is an add button that continuously adds a div container containing two dropdowns. The selection in one dropdown affects the data in the other dropdown. When the add button is clicked, a second div with both dropdowns is added. However, changing the ...

javascripthtmlcssangular

Is it possible to append the .active class to a div upon clicking a button?

I'm using bootstrap's tab system to create a "set up your account" page. The steps are displayed at the top of the page above the tab-panes. When a user clicks on an option in step one, it loads the step two tab and adds the active class to the c ...

jqueryhtmlcsstwitter-bootstrap