Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customizing Portfolio Titles Appearance


mgwebsite

Question

Site URL: https://metgal.art/

In order to get our portfolio (RESULTS page) hover over titles to appear as we want, I included some html. I thought by editng the SEO descriptions they wouldn't show up when searched in Google, but they do in some areas (like the general portfolio page). Can anyone help include CSS to help format the titles how we have them so I don't have to worry how they display in Google? Images to help illustrate below. 

 

 

Screen Shot 2020-12-31 at 9.12.34 AM.png

Screen Shot 2020-12-31 at 9.12.40 AM.png

Screen Shot 2020-12-31 at 9.21.11 AM.png

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi. If you use Business Plan, we can replace <br><p> with some other characters, example: #, |,.. It will still show up on GG (#, | or...), but it will look better than html tag. Do y

What if you wrote the titles in plain text (without the HTML) for SEO purposes, then had a script on the RESULTS page convert it to the way you currently have it? I'm not sure if that's the best idea,

Posted Images

2 answers to this question

Recommended Posts

  • 0

Hi. If you use Business Plan, we can replace <br><p> with some other characters, example: #, |,.. It will still show up on GG (#, | or...), but it will look better than html tag.

Do you use Personal or Business Plan?

Link to post
  • 0

What if you wrote the titles in plain text (without the HTML) for SEO purposes, then had a script on the RESULTS page convert it to the way you currently have it? I'm not sure if that's the best idea, but it's another idea. For example, your title would be "GENSLER - AUSTIN, TX" (notice it's hyphen separated), then script added to the RESULTS code injection would say to split it in half at the hyphen and add your other code when the page is loaded.
 

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll("h3").forEach(function (el, ind) {
        // this line below says to split it at the hyphen...
        var [place, location] = el.innerHTML.split("-");
        el.innerHTML = el.innerHTML.replace(location, "<p style='font-size:20px; line-height:0.1; transition-timing-function:ease; transition-duration: 1.5s; transition-delay: 0.391837s;' class='preFade fadeIn'>" + location + "</p>");
        el.innerHTML = el.innerHTML.replace(" -", "<br>");
    });
});

Or, let's say you'd prefer your titles to use two forward-slashes for SEO, like "GENSLER // AUSTIN, TX". I'll write that code too so you can compare the changes on lines 4 and 6.  

window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll("h3").forEach(function (el, ind) {
        // this line below says to split it at the two forward-slashes...
        var [place, location] = el.innerHTML.split("//");
        el.innerHTML = el.innerHTML.replace(location, "<p style='font-size:20px; line-height:0.1; transition-timing-function:ease; transition-duration: 1.5s; transition-delay: 0.391837s;' class='preFade fadeIn'>" + location + "</p>");
        el.innerHTML = el.innerHTML.replace(" //", "<br>");
    });
});

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...