Okay
  Public Ticket #2253043
H1 Heading Tags for Playlist Player Titles cause SEO issue
Closed

Comments

  • Tom started the conversation

    Hi, 


    I have Yoast SEO installed on my Sonaar themed website. It warned me of an error with the site which I see is part of the theme. Even though I have used custom CSS to hide the titles of the Playlist players on this site: https://currentsound.com  The Playlist Title is still loaded by the code but then just hidden by CSS.

    The issue is, the Playlist Titles are H1 headers. Each Page should only have 1 H1 header. The user should be able to control what the H1 header is. Whenever the Playlist is placed on a page, the Playlist Titles are H1 headers. I can see it when viewing the html code of the page in a browser but I have no way of changing it. Can this please be fixed in an update? Ideally, they should be lower level Headers, or at least give the user an option to change it.

    Right now I have 3 Playlist players on the Homepage as well as on another page on the site. Therefore I have 3 H1 Headers on these pages. This is going to confuse search engines and hurt SEO/Google rankings. Yoast SEO is warning that you can only have 1 H1 Header per page.

    Other than the SEO issue, the site looks good.

  •   Max replied privately
  • Tom replied

    Thanks for your help. That was fast. Just to clarify how to update the theme from the zip file. I went to themes, Add New but then I got this error: 

    413 Request Entity Too Large   

    nginx

    Do I have to delete the theme file first? If so, I am deleting the theme Sonaar, not Sonnar-Child, correct? If it still doesn't upload I could try unzipping the folder and manually uploading it onto the website's FTP as I have FTP access. Is there a way I can do it while keeping my theme custom settings and custom css? Otherwise I can try the save/export settings and import settings feature in the theme settings?

    The plugin update seems pretty straight forward. I assume I just delete the old one and add the new one.

    Thanks

  •  1,114
    Max replied

    Make sure you can upload file size more than 34mb on your server. Check with your hosting provider to raise the max upload file size limit.

    Thanks,


    Max from the Sonaar.io Crew

  • Tom replied

    Thanks. I raised the upload limit.

    In Wordpress went to Themes=>Add New and uploaded the zip and hit activate. Then I got this message: 


    Unpacking the package…

    Installing the theme…

    Destination folder already exists. /home/275560.cloudwaysapps.com/vkxyjwtemt/public_html/wp-content/themes/sonaar/

    Theme installation failed.


    Do I have to delete/remove the original Sonnar theme first?

    If I could not see an option to do this with the theme selected. Do I have to select another theme? If I do this, will my playlists and settings be wiped? Is there a way to save my mp3 playlists and bring them back or will I have to manually re-create them all again?

    Would it maybe just be better to replace certain files in the Sonaar theme folder via FTP to keep all of my playlists and theme settings?


    Thanks for your advice.


  •  1,114
    Max replied

    Yes active another theme then delete Sonaar and reupload it again. You won't lose anything. 

    Thanks,


    Max from the Sonaar.io Crew

  • Tom replied

    Thanks.


    I tested it. The Play & Pause playlist buttons seem to be misaligned now though. They were perfectly in line before. You can see the screenshots to see what I mean. It's the same when the playlist heading/title is hidden.

    It doesn't seem to fix the Yoast multiple H1 heading error (screenshot attached, 1st attachment) so I'm not sure if there are traces of it in the code somewhere. When I look at the page code in Google developer tools I can only see 1 H1 on the page, the playlist heading display as h3 now but Yoast seems to not be happy still so I'm not sure if something else is still going on that I'm missing or not seeing?

    At first my custom CSS (below) no longer removed the Playlist Title (as seen in the 2nd screenshot).


    .iron-audioplayer .tracklist-item-title {
        max-width: 100%;!important;
    }
    .iron-audioplayer .album {
        display: none!important;
    }
    .iron-audioplayer h1.sr_it-playlist-title {
        display: none!important;
    }
    .iron-audioplayer .sonaar-grid {
        display: block!important;
    }
    .iron-audioplayer .track-number .number {
        display: none!important;
    }



    But then I was able to remove it by adding this

    .iron-audioplayer h3.sr_it-playlist-title {
        display: none!important;
    }


    But whether the title is hidden or not, the extra Playlist Title seems to make the play buttons not align with the song titles, 2nd attachment.

    The final 3rd is what I looked like before.

    The 4th attachment is with the h3 heading hidden but the play buttons are misaligned



  •  1,114
    Max replied

    Try to clear your cache, CDN or any server cache you use. 

    Thanks,


    Max from the Sonaar.io Crew

  • Tom replied

    I use Breeze for Cloudways. In breeze I both purged the Varnish Cache, Disable and Re-enabled CDN (there seems to be no clear cache for that).

    In the theme settings I went to Ajax Continuous player off, save. Then on, save. As I've noticed sometimes I have to do that for things to work again.

    No change: https://currentsound.com/

    Any ideas? I haven't come across this problem yet except for when we did the update.

  • Tom replied

    I worked out the playlist track play button alignment issue. It seems that hide track number is now an option in the widget. I was hiding it in CSS in the older version. Doing that in the newer version causes the issue. If I use the actual hide track number button the play buttons become aligned again.

  •  1,114
    Max replied

    Oh great Tom ! thank you

    Thanks,


    Max from the Sonaar.io Crew

  • Tom replied

    So to summarize my testing of your fix.

    • Custom CSS is required to hide the Playlist Title when using a heading tag other than H1. The hide playlist title button only works for H1 tags. I'd suggest coding it to hide the user selected heading type when rolling it out in the official update.
    • It appears the H1 tags end up being lowered to whatever you select when viewing the html output in Chrome, Google Developer tools. 
    • However, Yoast SEO still throws a Multiple H1 heading error for some reason even though the outputted website appears to only have one H1 tag in the html code view: https://currentsound.com I'm not sure if it's detecting other H1 tags in javascript or something else and I'm not sure if Google will also see/detect other H1 tags also.

    So I think it's fixed now but I don't know why Yoast SEO still throws a multiple H1 headings error and if there is something we missed?

    Thanks for doing the fix so quickly.


    P.S. Also, just a reminder about the play state playlist bug we found a while back. When you have multiple playlists on one page, the play state remains when clicking another playlist instead of clearing so it looks like two or more songs are playing when only one is. I noticed that wasn't fixed in the recent updates. You can see it when clicking a song from each playlist on the page if you don't remember the bug: https://currentsound.com


    Thanks for your help

  •  1,114
    Max replied

    Hi,

    What do you mean by : It appears the H1 tags end up being lowered to whatever you select when viewing the html output in Chrome, Google Developer tools. 


    For the other issues, we will work on it and will release a fix in january.

    For the Yoast seing multiple H1, I think its because Yoast see a cached version of the old version.


    Thanks,


    Max from the Sonaar.io Crew

  • Tom replied

    I meant that 

    before the fix, I could see H1 title tags <h1   when viewing the html of the page in chrome by visiting the website in chrome and selecting from the chrome menu on the top right side, more tools=>developer tools and the playlist titles were listed as h1 for each playlist.

    If I do the same after the fix. I see what I changed them to which is h4. The only h1 tag on the page is now the title of the page that I wanted to be h1, not the extra h1 tags that were also on the playlist titles.

    So it appears the fix does lower the headings from h1 to the lower level h4 as far as I can tell.

    I was just wondering, since Yoast still gives the multiple H1 error. So I went to view the html code to see if there was more than 1 h1 tag still when I view the html of the page in the browser.

    I assume that makes sense now?

    Thanks


  •  1,114
    Max replied

    Hi,

    There is only 2 H1 on your homepage. the second H1 is the footer continuous player but this is a false positive. it wont affect your seo rank because its in a different section


    Thanks,


    Max from the Sonaar.io Crew