seo Question posted in
Some basic information to get you started with this can be found here.

How can I make the entire image clickable on my wordpress.org site? – SEO

Right now my posts can only be clicked by clicking the title, but I would love for the entire image to link to each individual post.

<article id="post-<?php the_ID(); ?>" <?php post_class('card-box col-lg-4 col-md-6 col-sm-12 col-xs-12'); ?>>
    <div class="card" data-background="image" data-src="<?php esc_url( the_post_thumbnail_url( 'large' ) ); ?>">
             <div class="header">
                    <?php
                    $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                    ?>                                                          
                        <div class="category">
                            <h6>
                                <span class="category">
                                    <?php  echo '<a class="category" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>'; ?>
                                </span>
                            </h6>
                        </div>
                    <?php } ?>                        
                </div>
                <div class="content">
                    <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?>
                    <span class="date"><?php echo esc_html( get_the_date() ); ?></span>
                </div>
                <div class="filter"></div>
                </div> <!-- end card -->
        </article>

I don’t want to use js because I’ve been told that’s not SEO friendly.

I’ve tried using the tag from the entry-title and surrounding the whole div with that same link, but it did not work.

Tags:

2

Answers


  1. 0

    That’s how it is done in HTML:

    <a href="...">
    <img alt="..." src="..." />
</a>
    Login or Signup to reply.
  2. 0

    The following should work if the rest of the code works. What I did: I copied the <a> tag from the h4 element (the post title) and put it around the image (lines 2-4, no other changes in original code):

    <article id="post-<?php the_ID(); ?>" <?php post_class( 'card-box col-lg-4 col-md-6 col-sm-12 col-xs-12'); ?>>
  <a href="<?php the_permalink(); ?>">
    <div class="card" data-background="image" data-src="<?php esc_url( the_post_thumbnail_url( 'large' ) ); ?>">
    </a>
  <div class="header">
    <?php
                    $categories = get_the_category();
                    if ( ! empty( $categories ) ) {
                    ?>
      <div class="category">
        <h6>
          <span class="category">
                                    <?php  echo '<a class="category" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>'; ?>
                                </span>
        </h6>
      </div>
      <?php } ?>
  </div>
  <div class="content">
    <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?>
    <span class="date"><?php echo esc_html( get_the_date() ); ?></span>
  </div>
  <div class="filter"></div>
  </div>
  <!-- end card -->
</article>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search