How to avoid duplicated content in bootstrap?

user_1434847 0
Viewed 308

In my website I would like to display the phone number, and I would like to let the phone number be clickable when it is being accessed by the mobile website.

The following is the snippet of the code:

class MyGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = { phone: "123" };
  }
  render() {
    return (
      <div>
        <div className="d-block d-sm-none">
          <a href={"tel:" + this.state.phone}>
            <p className="footer-subheading text-link">{this.state.phone}</p>
          </a>
        </div>
        <div className="d-none d-sm-block">
          <p className="footer-subheading">{this.state.phone}</p>
        </div>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <MyGrid />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div id="react"></div>

The first part would be displayed on phone (the phone number is clickable) and the second part shows on tablet and up (only text). Although there is only one phone number is displayed, the search engine would warn me for having duplicated phone number. I would like to see if it can be solved in different way.

Thanks in advance.

react-bootstrap bootstrap-4 reactjs
1 Answers

Using react-responsive avoids the duplicated content is being rendered twice on the client. Here is the code snippet from the react-responsive:

import React from 'react'
import { useMediaQuery } from 'react-responsive' 

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-device-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isTabletOrMobileDevice = useMediaQuery({
    query: '(max-device-width: 1224px)'
  })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
 
  return (
    <div>
      <h1>Device Test!</h1>
      {isDesktopOrLaptop && <>
        <p>You are a desktop or laptop</p>
        {isBigScreen && <p>You also have a huge screen</p>}
        {isTabletOrMobile && <p>You are sized like a tablet or mobile phone though</p>}
      </>}
      {isTabletOrMobileDevice && <p>You are a tablet or mobile phone</p>}
      <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
      {isRetina && <p>You are retina</p>}
    </div>
  )
}

The original bootstrap way would show the content based on the screen size. But using react-responsive way would generate the content based on the screen size. Therefore the search engine would only get one copy of the content, based on it's screen size.

user_14348470
Related