Jump to content

Need to Add Custom Title and Text on Blog Landing Page

Recommended Posts

  • Replies 17
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Add to Website > Page (or Design) > Website Tools > Custom CSS

body#collection-61c02453b72f9a6d676149bb #page:before {
    content: "Philippines Travel";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}
body#collection-5b967321575d1fa6884b1635 #page:before {
    content: "Latest Updates";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}

image.png.39f72ecab24ac720006cf4b2deda257d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, tuanphan said:

Add to Website > Page (or Design) > Website Tools > Custom CSS

body#collection-61c02453b72f9a6d676149bb #page:before {
    content: "Philippines Travel";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}
body#collection-5b967321575d1fa6884b1635 #page:before {
    content: "Latest Updates";
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-family: aktiv-grotesk;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}

image.png.39f72ecab24ac720006cf4b2deda257d.png

Thank you @tuanphan for this piece of code but I wanted to add H1 Tag on its page heading as well one line text..

E.g. For this page https://www.philippinestravelguides.com/philippines-travel <h1>Philippines Travel<h1>
Get real information and experiences from our Philippines Travel Trip diaries

Could you please provide code how to do that?

Thanks

Edited by madzie
Link to comment
23 hours ago, madzie said:

Thank you @tuanphan for this piece of code but I wanted to add H1 Tag on its page heading as well one line text..

E.g. For this page https://www.philippinestravelguides.com/philippines-travel <h1>Philippines Travel<h1>
Get real information and experiences from our Philippines Travel Trip diaries

Could you please provide code how to do that?

Thanks

Second text: Get real information and experiences from our Philippines Travel Trip diaries will be paragraph <p> or?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/23/2023 at 11:12 AM, madzie said:

Yes it will be paragraph

Add this code to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('body#collection-61c02453b72f9a6d676149bb #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

image.thumb.png.701de8ecead74fc557aea1e441c8a76a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, tuanphan said:

Add this code to Last Line in Code Injection > Footer

<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('body#collection-61c02453b72f9a6d676149bb #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

image.thumb.png.701de8ecead74fc557aea1e441c8a76a.png

But I want to add H1 tag and Paragraph text in every pages, but the code which you gave will work for 1 page... Am i Right?

Link to comment

Remove code from Code Injection, add this code to Philippines Travel Page Settings > Advanced > Header Code Injection

Repeat similar for other blog pages, just change the text in the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 hours ago, tuanphan said:

Remove code from Code Injection, add this code to Philippines Travel Page Settings > Advanced > Header Code Injection

Repeat similar for other blog pages, just change the text in the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p>').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p {
    text-align: center;
}
</style>

 

Thank you @tuanphan

Link to comment

Hi @tuanphan,

I have added the above script in every pages as you explained for h1 tag and paragraph. But, most of the crawlers doesnt detect this H1 tag, when i made the SEO audit of the website. It reports as Missing H1 Tag. Please see attached, is there any other way to add H1 tag to pages which crawlers can detect too.

Also, I would like to change H2 which is coming up on my Blog Title to H1 tag, can you please help me with it. For example for this page https://www.philippinestravelguides.com/philippines-destinations/puerto-princesa-travel-guide H2 tag is on Explore the Wonders of Puerto Princesa: Travel Guide which i need to change to h1 tag.

Screenshot 2023-09-26 162338.png

Screenshot 2023-09-26 162502.png

Link to comment

Maybe Your Tool craws site before the script code loading, so it won't find h1 to show 

You can try this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

Note the text, maybe appears before header 1-2 seconds, then disappear and appear to correct position

Don't care this, and check your seo tool again, if it works, I will give code to fix this problem

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:

Maybe Your Tool craws site before the script code loading, so it won't find h1 to show 

You can try this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('#page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

Note the text, maybe appears before header 1-2 seconds, then disappear and appear to correct position

Don't care this, and check your seo tool again, if it works, I will give code to fix this problem

Hi @tuanphan I added this code and h1 tag works but same h1 tag is appearing on all sub pages.

For example, I added the code to this page https://www.philippinestravelguides.com/philippines-travel

and it works but same H1 tag is appearing on this page as well https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

Thanks

 

Link to comment
On 9/27/2023 at 9:51 PM, madzie said:

Hi @tuanphan I added this code and h1 tag works but same h1 tag is appearing on all sub pages.

For example, I added the code to this page https://www.philippinestravelguides.com/philippines-travel

and it works but same H1 tag is appearing on this page as well https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

Thanks

 

Use this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('body.view-list #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

And add this to Website > Page > Website Tools > Custom CSS

  body.view-item .custom-heading {
  	display: none !important;
  }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, tuanphan said:

Use this new code

<div class="custom-heading"><h1>Philippines Travel</h1><p>Get real information and experiences from our Philippines Travel Trip diaries</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.custom-heading').insertBefore('body.view-list #page .blog-list');
});
</script>
<style>
  main#page>h1, main#page>p, #page .custom-heading {
    text-align: center;
}
</style>

And add this to Website > Page > Website Tools > Custom CSS

  body.view-item .custom-heading {
  	display: none !important;
  }

 

@tuanphan This code doesnt works, it is still showing H1 tag "Philippines Travel" to other pages such as on https://www.philippinestravelguides.com/philippines-travel/bamboo-paraiso-resort-hundred-islands https://www.philippinestravelguides.com/philippines-travel/leyte-visayas-adventure-tours

Link to comment
On 9/29/2023 at 7:52 PM, madzie said:

HI @tuanphan was wondering if you still can help me out with a solutions?

 

Thanks

Link to comment
On 9/29/2023 at 9:22 PM, madzie said:

I see blog detail post fine here?

image.thumb.png.11df600bae051efe3004497cffed7f6a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

There are only 2 ways to insert the title into the list page, one is to use jQuery code as I sent at the beginning, but as you said SEO Tools does not display it, the other is to use the code I sent in the second code (insert HTML tag then hide it in Detail Page).

In my opinion there is no way to get what you want. Maybe you need to hire a better dev to help you with this.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.