Instructions

Home
/
Services
/
Instructions
Stroke ImageStroke Image

Logging In

To log in, you'll either need to click "Login" on the Footer Bar or log in via your bookmarked link that has been sent to you.

The Login page should show "Email" and "Password". Enter in your credentials to access your site.

After Log In

Once logged in your able to edit & publish the . Either by clicking on the text, that you see on the page, or clicking on the tab below that shows "Pages", "Orders", "Ecommerce", "Collections" and "Forms"

Tab Pages

To see the static pages that has been created, in draft, and archived click on pages. From here you will see both English and Arabic versions of your site. With the exemption of CMS which will be in English.

Tab Pages  - Next

To see the additional Static page, click on "Next". To return to the previous tab click on "Previous". Each page will have its own unique meta description, OG image and url that will help organize the features of your Islamic Center .

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Instructions

test

Static Page Setup Overview

To view the static page information, you will need to click on "Settings" button. It will show when you hover over the static page name.

From here you will see the "URL", "Title Tag" , "Meta Description", and "OG Image".

Instructions

test

Collections (CMS)

To view the dynamic information, you will need to click on "Collections". The Collections will hold the data for your site as in Images, FAQs, Member Reviews, etc.


We will go into depth on how to add & update the CMS information below, starting with "Blogs".

Blog Collections

Blog Posts

Once you click on "Blog Posts", you will see all of dynamic blogs that has been created. They will show either as "Published", "Draft", or "Archived". To add a new blog post click the green button called "+ New Blog Post" . To edit a blog post click on the blog name

Editing / Adding a New Blog Post

Once your in the blog creator, you will see the following data to edit/add
-"Name / URL"

The "Name" would be the blog title, the URL will automatically update with the name you have created.

‍- "Blog Post Author"

The Author selection is what you will be using to credit the author that made the blog post

‍
- "Youtube URL (Optional) "

If you have a Youtube video that you know that would help enchance the reading experience of your reader, this is where you would add in the URL to the bar.

‍
- "FAQ Connect v0-v2"

For FAQ Connect v0-v2, you can select any of the FAQs that best represent what your blog is about.

- "OG Image, Cover Image, "Featured Image"

OG Image will automatically update depending if both the Cover Image and Featured Image have an image in them. The OG image will the "Featured Image Section" to populate its data.

OG Image are used when sharing a URL link on social media.

-Alt Text:

Helps in improving website accessibility, contributes to better SEO as search engines use alt text to identify the content of web pages.

-Blog CMS Category Text:

Helps in organizing content, making it easier for readers to find related articles and improves site navigation.

Blog Post - Short Description:

Captures readers' attention, provides a quick overview of the topic, and can improve click-through rates from search results or blog listings.

Estimate Read Time:

Sets reader expectations and can influence their decision to engage with the content, especially for readers on a tight schedule.

Blog Post- Featured / Recent:

Drives more traffic to specific articles, promotes new content, and keeps readers engaged by showcasing the best or latest pieces.

Blog Description:

Provides context to new visitors, sets the tone for the content, and can impact SEO.

Schema Related Information:

Enhances the display of search results, leading to better click-through rates. It can also be instrumental in informing search engines about the details of your content, making it more likely for the content to appear in relevant searches.

Blog Post Detail

Image reference to the category selection, Images, FAQ

Blog Post Detail; Read Time & Description

Image reference to an example for description, and read time for a blog post

Blog Post Additions

In regarding to the blog post, your also able to add in videos, quotes, headings, and images to further enhance your blog post.

Instructions

test

Blog Post Category Collections

Blog Post Categories Admin Description

Blog Post Categories Explanation:

The "Blog Post Categories" are designed to categorize and organize blog content, making it easily accessible through the category navigation bar. Each category provides specific insights or topics related to Islam. Here's a breakdown of the categories:

Islamic Teachings:

Essential teachings and tenets of Islam shaping the beliefs and practices of Muslims.

Aqidah:

Represents the Islamic creed, detailing the core beliefs held by Muslims about divinity, prophets, angels, and more.

Fiqh:

The realm of Islamic jurisprudence, detailing interpretations of Islamic laws derived from the Qur'an and Hadith.

Tafsir:

Expert interpretations of the Qur'an, offering deeper insights into the context and meanings of Quranic verses.

Hadith:

Overview: Chronicles the sayings, actions, and endorsements of Prophet Muhammad (peace be upon him), serving as a guiding light alongside the Qur'an.

General Insights:

Covers a broad spectrum of topics in Islam, enriching understanding and fostering thoughtful discussions.

Biographies:

Delves into the lives and legacies of pivotal figures in Islam, including prophets, scholars, and other luminaries.

Contemporary Topics:

Modern issues or subjects viewed through the prism of Islamic teachings and values.

Other/Misc.:

Addresses a diverse range of Islamic topics not confined to any particular category.

Community Services:

Highlights services and initiatives dedicated to enriching the Muslim community and the broader society.

Education:

Emphasizes Islamic educational pursuits, resources, and institutional insights.

Donation:

Provides information and avenues related to charitable acts, contributions, and supporting Islamic endeavors.

After Selecting a Category

You will be able to add a Category name, link name(which will be used as an URL), featured author, and category blog that it will connect with .

OG Image can be left alone, it will automatically update once you have saved your settings.

Adding Description to Category

Updating the description for your category , is what will be shown onto the category page: Example: https://www.islammacomb.org/blog-post-category/hadith

Instructions

test

Instructions

test

Daily Salah Collections

Blog Post

test

After Log In

test

Instructions

test

Events Collections

Event Collection Viewing

To update your event viewing, go to Collections then click on "Events".

Once your on Events tab you will be able to access the current events that you have made.
To add a new event, click on the green button(New Event)

Event Modification

Once you have click on New Event, you will be able to update an Event name, URL, Location of the event including event address.

OG Image can be left alone, it will automatically update

Event-Main Image & Event- Image (Page) are image's that you can add onto the Event to add visual context.

Event-Short Description : Short description of the event.

Event -Read Time : Estimate time to finish reading the event

Event-Features? : Feature the event on the site

Event-Resent?: Re-post the event on the site to other portions

Event-Description: Add a description for the event, describing/explaining it to visitors that will attend the event.

Event-Category: Select the category that will best fit in with the event objective. (Educational event? , Donation event?, Prayer Event?, Marriage Event?, etc)

FAQ Collections

FAQs - Answering Questions for Visitors

To add/modify/remove FAQs click on Collections - FAQs

From there you can either select a current FAQ or add a new FAQ
- Name: FAQ name

Slug: Can ignore adding in the FAQ URL, it will automatically upload

Who we Are or EDU: select if the FAQ is an about us FAQ or an educational FAQ

Translate Button: Leave it for English

Youtube Video: If you have a youtube video that can further add to the answer , add in the link their.

OG Image: Leave the OG image alone, it will automatically upload on its own.

Additional FAQ Info

FAQ SEO: add in a short detail of the FAQ description

FAQ Text Answer: Add in the answer to the FAQ

FAQ Description: Add the description, further explanation of the FAQ

Possible Quotes: Quotes that will further add to the FAQ answer

‍

  • Anything under Video Name, Video Schema Description

Can leave it blank, any changes to the FAQ AND if you have added a Youtube video, can message me anytime, I'll add in the details that will help your FAQ post be seen easier.

IMAGE Collections

Updating Image Posts

Updating image posts -> Collections -> Images -> New Image OR click on a current Image to edit it.

Adding in information

Name: Image name

Slug: Leave the slug alone, it will automatically generate from the name

Translate: Leave it on English

Height & Width: Add the Height & Width that the image has

Image : Upload the image, either by clicking on it or dragging it. It will show the Height & Width, can use that to add in the information to height & width. (This is used for displaying it correctly on the page for mobile & monitors. )

  • Short Img Text-Schema

-This is used to help showcase your image on the web, add in what the image is showing or what it was for

Subtext: It's a shorter description, can copy & paste it from Short Img Text-Schema (Used for dispalying it on site)

Alt Text: image description, if the image does not load, the text information will describe what its used for.

Member Collections

Google Reviews

To add in member reviews - Collection -> Members

  • Due to transferring information from Google Reviews for the Mosque, can message me on updating this portion due to the SEO element requirements.

To update this on your own, can click on "Member Review"

- From there add in the information such as

Name: Reviewer name

Slug: Leave this alone, it will automatically generate

Review TIme Date: When the review was made (approx.)

OG Image: leave this alone, it will automatically generate after a day

Reviewer Image: Copy/save the google reviewer image and drag it to the Reviewer Image portion.

Star Rating: Select the review star rating

Short Review Text: Copy/paste the reviewer rating statement.

Member Review Additional Info

-Lastly(most important)

Add the reviewer link : To get the review link click on "share" under the reviewer statement and paste it onto Review Link.

Service Collections

Services Tab

Maintains the CMS data for the services offered by your Islamic Center.

Services Information

To edit/add a new service , will show the service name, url (which will automacitally update based on the anme you choose). Background Image that you can upload and service Icon. The OG Image will automatically upload depending if you have updated the background image.

Meta Description and service descritpion are what will be used to help your service page be seen on search engines, while the desription is what will describe your services to member/ vistors that visit that service

‍

Service Information In Depth

Here's an example of the service description information.

‍

Blog Post

test

sPECIAL aRRANGEMENTS Collections

Special Arrangements

test

Blog Post

test

Blog Post

test

sPECIAL Occasion Collections

N/A

test

Blog Post

test

Blog Post

test

Category Page

Category Page Information

Category Pages are used as a way to hold your Islamic Center Blog Posts, in which will connect to the categories below. Depending on the subject that best describe the blog, they will connect with the CMS information, with other blogs that share the same category.

Category Edit

Editing or adding a category is similar to updating a blog post or service information. When you name the category page, the URL will automatically update. The meta description informs search engines about the page content, and adding the date and image alt text further enhances this.

‍

Blog Post

test

Blog Post

test

Blog Post

test

Blog Post

test

Ecommerce

Blog Post

test

Blog Post

test

Blog Post

test

Blog Post

test

Blog Post

test

Blog Post

test

Blog Post

test

Schema

Schema Example

The first part that you see is :JSON-LD Structured Data (Schema Markup) which is from @context: to "query-input"

‍
This script tells search engines specific details about the website.

@context specifies the vocabulary being used, which in this case is Schema.org, a centralized vocabulary for structured data.

@type defines the type of item being described; here, it's a "WebSite".

name provides the name of the website.

url provides the main URL of the website.

potentialAction indicates a potential action that can be done on the website. In this case, it's a "SearchAction" which describes the search functionality of the site.

It provides a target URL template to demonstrate how search queries are constructed, and query-input specifies what's needed for the search action.

‍The next part of your Schema is called : Meta/Link Tags:
starting from <link rel="canonical" href="https://www.islammacomb.org/"> to <link rel="alternate" hreflang="ar" href="https://www.islammacomb.org/ara/home">

The canonical link specifies the main version (canonical version) of a webpage. It helps prevent duplicate content issues in SEO by indicating to search engines which version of a page to index and rank.

The alternate tags with the hreflang attribute indicate alternate language versions of the page. In this case, there's an English version (en) and an Arabic version (ar). This helps search engines serve the right language version of the page to users based on their language preference or location.

Together, these components provide search engines with vital information about the website, enhancing its chances of being correctly indexed, and ensuring users are directed to the most appropriate version of the page.

‍

Basic Schema Explanation

The next part of your site Schema is "Organization Schema Markup"

This code comprises two sets of JSON-LD structured data (often referred to as "schema markup"), which provide search engines with specific details about the website and its structure. Let's break down each section

@context: Specifies the vocabulary being used, in this case, Schema.org.

@type: Indicates that the information pertains to an "Organization".

name: The name of the organization.

url: The main URL of the organization.

logo: The URL for the organization's logo.

sameAs: An array of URLs that represent the organization on other platforms, such as social media and personal websites.

description: A brief overview of the organization.

address: Detailed postal address for the organization, broken down into components.

contactPoint: Direct contact details, such as telephone, email, and the type of contact.

‍

Breadcrumb Explanation

The breadcrumb navigation is like a roadmap on a website. It shows the path you've taken from the home page to the page you're on, with each step being a clickable link. Think of it like retracing your steps in a digital space.

@context: Specifies the vocabulary being used, in this case, Schema.org.

@type: Indicates that the information is describing a "BreadcrumbList", which typically details the hierarchy or path a user took to arrive at a specific page.

itemListElement: An array that lists each step in the breadcrumb trail. Each element (or "step") has:

@type: Which is a "ListItem".

position: The step's order in the breadcrumb trail.

name: The name/title of this breadcrumb step.

item: The URL that corresponds to this breadcrumb step.

‍

Open Graph Image Use & In-Depth Breadcrumb

Open Graph Image URL  

  Think of the Open Graph as a way to make links look good when you share them on social media. The `og:image` is the picture you see next to a link you share. So when you add a link like this:

  <meta property="og:image" content="https://example.com/image.jpg">

It's telling Facebook, Twitter, and others to show that picture when someone shares your website.

In-depth Breadcrumb Schema

  This code gives search engines a map of how your website is organized. It’s like telling Google the steps someone took to get to a specific page. Here's a simple breakdown:

  <script type="application/ld+json">

  {

    "Context": "The language we're using to describe the site",

    "Type": "It's a breadcrumb list to show the path",

  }

  </script>  

  - `Home`: Your website's main page.

  - `Exploring Islamic Insights: Blog Articles`: A section about blog articles.

  - `Islamic Perspectives & Deep Insights`: A specific part of that blog section.

  - `Islamic Luminaries & Their Legacies`: An even more specific page or article in that section.

  This helps both search engines understand your site and people navigate it. If shown on the website, users can click on parts of the breadcrumb to go back to previous pages.

‍

Semrush Site Health

Think of SEMrush like a health check for your website. It looks at how well your website is set up and gives it a score. If it finds things like slow-loading pages, mobile issues, or broken links, it'll tell you so you can fix them. A higher score means your website is in better shape and could show up higher in search results.

‍

Google Search Console

This is a tool from Google that's like a report card for your website. It tells you how your website is doing when people search on Google. You can see which words people use to find your site, how often your site shows up, and if there are any problems Google found. It's a way to see how Google views your site.

Bing Webmaster

This is just like the Google tool, but for the Bing search engine (from Microsoft). It gives you a peek into how your website is doing on Bing, tells you if there are problems, and provides suggestions to get seen more on Bing searches.

‍

I'll handle all these on the backend, so you don't have to worry about managing or setting them up. Just a heads up: Since your website is new, the information you see on these tools might be basic at first. But as more folks visit your website over time, you'll get more detailed info. It's like how a new shop might not get a lot of feedback right away but will get more reviews as more people visit.

General Info

Blog Post

test

Blog Post

test

Form Submission Data

This is where you can see all the details that people have filled out and submitted through forms on your website. Whether it's a contact form, a signup sheet, or any other type of online form, all the responses are neatly organized here for you to review.

If you want to analyze the data or keep a backup, there's an "Export CSV" option. This lets you download all the submission data in a CSV file format, which you can then open and use in Excel. It's a handy way to manage and use your form data outside the website.

‍

Settings & E-commerce Features:

In the settings section, you'll find options to customize and manage the core functionalities of your website. One of these essential features is the "E-commerce" button. Clicking on it will take you to all the tools and configurations related to online sales. Here, you can manage product listings, track sales, set shipping rates, and more.

Additionally, there's the "Account" feature, where you can create or log into your personal accounts on the site. This enhances the shopping experience, allowing you to save shipping details, view past orders, and manage personal preferences.

‍

Blog Post

test

eND of Documentation

Blog Post

test

Blog Post

test

Final Notes

I hope this website will serve as a valuable asset to your mosque now and in the future. If you ever need me to add, edit, or update anything, please feel free to contact me. I will respond as soon as possible.

I also want to express my gratitude for the opportunity to help your mosque. Consider it a donation of my knowledge to your cause.

I wish you all the best and a fulfilling journey ahead.

~Ahmed Almawi (Jonathan Almawi)

‍

‍

Muslim Service

Blog Post

test